说说如何配置 Webpack-白红宇

1 基本配置

Webpack 最关键的就是 webpack.config.js 配置文件，架构的好坏都体现在这个配置文件中。

我们在工程所在的根目录，新建一个 webpack.config.js，初始化为：

var config = {};module.exports = config;复制代码

如果 IDE 安装了支持 ES6 的编译插件，那么这里就可以直接使用 ES6 的导出语法：export default config;

接着，在 package.json 中的 scripts 内，配置 dev 属性，指向刚才新建的 webpack.config.js：

"scripts": {	...	"dev":"webpack-dev-server --open --config webpack.config.js"}复制代码

webpack-dev-server 命令配置属性如下：

属性	说明
config	webpack-dev-server 配置文件路径。
open	浏览器打开的页面 URL，默认为 127.0.0.1:8080。如果配置了该选项，那么就会在命令执行成功后，打开浏览器。
host	浏览器打开的页面 IP 地址。
port	浏览器打开的页面端口号。

2 入口与出口配置

入口配置的作用是告知 webpack 从哪里开始寻找依赖，然后 webpack 通过这些依赖执行编译操作。

出口配置用于配置编译后的文件存储路径以及文件名称。

我们在项目根目录，新建一个 main.js 作为入口文件，然后在 webpack.config.js 中配置入口与出口。

var config = {    entry: {        main: './main'    },    output: {        //目标输出目录        path: '/public/assets',        //资源文件引用目录        publicPath: '/dist/',        //输出文件的文件名        filename: 'main.js'    }};module.exports = config;复制代码

在 entry 中配置入口，其中的 main，就是我们的配置入口，它指向的就是在 package.json 中配置的 main 所配置的 js 文件（这里是 main.js）。

在 output 中配置出口，它有以下这些配置项：

属性	说明
filename	输出文件的文件名。
path	目标输出目录。
publicPath	资源文件引用目录。如果资源文件托管在 CDN 上，那么可以在此配置 CDN 地址。

最后，新建一个 index.html 作为主页面入口：

    
        Title    
    
         你好呀
    
复制代码

运行命令：

npm run dev复制代码

运行成功后，就会自动打开浏览器，进入 http://localhost:8080/。这时可以看到页面输出：

你好呀

修改 main.js 内容：

document.getElementById('app').innerHTML = '欢迎来到 webpack 世界，哈哈'复制代码

然后再回到浏览器，可以看到页面被自动刷新咯：

欢迎来到 webpack 世界，哈哈

这是 webpack-dev-server 的热更新特性，它会通过建立 WebSocket 连接来实时响应代码的变化。

main.js 被编译为拥有 387 行代码的脚本：

因为是开发模式，所以编译出的代码较多。

热更新时，控制台也会打印出相关信息：

控制台中想要退出当前命令状态，可以按 ctrl + c，来终止当前操作。

3 Cannot find module 'webpack-cli/bin/config-yargs'

如果运行 npm run dev，抛出异常：Error: Cannot find module 'webpack-cli/bin/config-yargs'：

那么使用 npm 安装下 webpack-cli 即可：

npm i webpack-cli -D复制代码

i ：是 install 的缩写。

-D ：是 --save-dev 的缩写。

运行结果：

4 配置加载器（Loaders）

在 Webpack 中，每种文件都是一种模块，需要不同的加载器来处理。比如 css 文件就需要 style-loader 和 css-loader。我们使用 NPM 来安装这些加载器：

npm install css-loader --save-devnpm install style-loader --save-dev复制代码

安装成功后，我们接着在 webpack.config.js 中配置 CSS 加载器：

var config = {    module: {        rules: [            {                test: /\.css$/,                use: [                    'style-loader',                    'css-loader'                ]            }        ]    },    entry: {       ...    },    output: {      ...    }};module.exports = config;复制代码

我们可以在 module 的 rules 中，指定多个加载器。每个加载器都需要包含以下属性：

属性	说明
test	正则表达式
use	所使用的加载器。可以是字符串或数组；如果是数组，那么它的编译顺序是从后往前。

然后在根目录，新建一个 style.css 样式文件，内容为：

#app {
        font-size: 24px;    color: #3399ff;}复制代码

最后运行 npm run dev 命令。可以看到页面已被加入样式咯：

Webpack 是利用 JavaScript 来动态创建 <style> 标签，从而写入定义的样式：

这种方式，在实际项目中并不适用。因为一个项目可能有很多样式，如果都放在 JS 中，就会让脚本变得臃肿，影响性能。

5 配置插件（Plugins）

我们可以使用 extract-text-webpack-plugin 插件，把项目中分散的 CSS 样式集中起来，放入 main.css，最后在 index.html 中通过 <link> 来加载它。

安装 extract-text-webpack-plugin 插件。

npm install extract-text-webpack-plugin --save-dev复制代码

注意： 如果使用这个命令来安装该插件，那么默认会安装 3.0.2 版本，而这一版与 Webpack4.0+ 不兼容。

如果要安装兼容 Webpack4.0+ 版本的 extract-text-webpack-plugin 插件，请使用以下命令安装：

npm install extract-text-webpack-plugin@next --save-dev复制代码

这会安装 extract-text-webpack-plugin@4.0.0-beta.0。

在 webpack.config.js 中，配置好刚刚安装的插件：

//插件var ExtractTextPlugin = require('extract-text-webpack-plugin');var config = {    module: {        rules: [            {                test: /\.css$/,                use: ExtractTextPlugin.extract({//插件                    use: 'css-loader',                    fallback: 'style-loader'                })            }        ]    },    entry: {             ...    },    output: {       ...    },    plugins: [//插件        new ExtractTextPlugin('main.css')    ]};module.exports = config;复制代码

再次运行 npm run dev：

页面效果与刚才相同，只不过这时项目样式，已经是通过 <link> 引入的啦O(∩_∩)O~

Webpack 的关键部分是 js 配置，核心概念是入口、出口、加载器与插件。