webpack4+入门使用

　　在开始之前检查node版本，确保node是最新的版本。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。

// 检查node版本
node -v
v8.11.1

mkdir webpack-demo && cd webpack-demo

起步

　　首先创建一个文件夹webpack4.0-demo，并初始化npm，然后本地安装webpack和webpack-cli。

mkdir webpack4.0-demo && cd webpack4.0-demo
// 初始化npm，并全部使用默认值
npm init -y

本地安装

　　使用4+版本需要安装webpack-cli，

 cnpm install --save-dev webpack webpack-cli

目录结构

src/index

要在 index.js 中打包 lodash 依赖，我们需要在本地安装 library：

cnpm install --save-dev lodash

import _ from 'lodash'

function creatEl(){
    let el = document.createElement('div');

    // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
    el.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return el
}

document.body.appendChild(creatEl())

dist/index.html

package.json

{
  "name": "webpack4.0-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,　　// 删除入口文件，确保我们安装包是私有的(private)
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "lodash": "^4.17.11",
    "webpack": "^4.19.0",
    "webpack-cli": "^3.1.0"
  }
}

　　执行webpack或者npx webpack，会将脚本作为入口文件，然后输出为main.js。Node 8.2+ 版本提供的 npx 命令，可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件。

　　在浏览器中打开 index.html，如果一切访问都正常，你应该能看到以下文本：'Hello webpack'。

使用配置文件

　　在 webpack 4 中，可以无须任何配置使用，然而大多数项目会需要很复杂的设置，这就是为什么 webpack 仍然要支持 配置文件。这比在终端(terminal)中手动输入大量命令要高效的多，所以让我们创建一个取代以上使用 CLI 选项方式的配置文件。

　　在主目录先添加一个webpack.config.js文件。

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

package.json

{
  "name": "webpack4.0-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"　　// 新加代码
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "lodash": "^4.17.11",
    "webpack": "^4.19.0",
    "webpack-cli": "^3.1.0"
  }
}　　

　　将index.html中的script标签的src改成bundle.js。现在，可以使用 npm run build 命令，来替代我们之前使用的 npx 命令。注意，使用 npm 的 scripts，我们可以像使用 npx 那样通过模块名引用本地安装的 npm 包。

管理资源

加载css

　　为了从 JavaScript 模块中 import 一个 CSS 文件，需要在 module 安装并添加 style-loader 和 css-loader。

cnpm install --save-dev css-loader style-loader

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}

webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。在这种情况下，以 .css 结尾的全部文件，都将被提供给style-loader和css-loader。
这使你可以在依赖于此样式的文件中 import 'style.css'。现在，当该模块运行时，含有 CSS 字符串的