标签：

1. devtool代码调试 1. 生产模式下

source-map: 生成一个map文件，直接定位到源码的行列

?可以使用该模式，用于测试服务器

cheap-source-map: 只能定位到行，且只能定位到babel转码后的代码

cheap-module-source-map: 只能定位到行，但是可以定位到源码

2. 开发模式下

eval: 定位到编译后的代码

cheap-eval-source-map:  定位到babel转码后的行

cheap-module-eval-source-map: 定位到源码的行

eval-source-map: 定位到源码的行列

?推荐使用该方法

line-*模式慢，不考虑

2. 第三方库的应用 1. webpack.ProvidePlugin

对于类似lodash的各模块频繁使用的情况, 为了避免每次都手动引入，可以使用该插件实现全部模块的自动引入该文件。只是优化了重复引入的问题，打包体积和直接引入相同。

new webpack.ProvidePlugin({ _: ‘lodash‘ }),

相当于在每个模块都默认执行了引入，用户可以直接使用。

import _ from ‘lodash‘;

?该方法不是全局变量

2. expose-loader

该方法可以避免重复引入高频使用的库。而且可以将其作为全局变量。对于debugging很方便。 在控制台就可以直接使用。

在入口文件使用：

// 必须是require require(‘expose-loader?_!lodash‘); // !前是全局变量名称；!后是库名

然后可以直接使用window._访问。

3. externals

当已经从CDN等外部引入第三方库时，如果代码中又手动引入了同样的库，该配置可以让webpack不打包配置中的第三方库。

externals: { lodash: ‘_‘ // :前的key是库的名称；后面是全局变量的名称 }

想要起作用，必须要在html中引入CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

如上，即使在模块中手动引入，webpack也不会将其打入包内

import _ from ‘lodash‘; //会忽略引入的lodash库 const a = _.join([‘a‘, ‘b‘], ‘~‘);

4. html-webpack-externals-plugin

3中，需要在html文件中引入CDN文件。如果不想手动引入，直接配置生成,可以使用该插件。

??该插件必须在html-webpack-plugin插件实例化之后再进行实例化

new HtmlWebpackPlugin({ }), new HtmlWebpackExternalsPlugin({ externals: [ { module: ‘lodash‘, global: ‘_‘, entry: ‘https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js‘ } ] }),

3. 打包后的代码添加注释说明

new webpack.BannerPlugin(‘Lyra‘),

4. 拷贝静态文件（txt/doc等）

new CopyWebpackPlugin([{ from: path.join(__dirname, ‘./src/assets‘), to: path.join(__dirname, ‘./dist/assets‘) }]),

5. devServer实现proxy代理，和模拟服务器

devServer: { contentBase: path.join(__dirname, ‘dist‘), port: 8080,
　　 host: ‘localhost‘,
compress: true, // 启用gzip压缩 before(app) { // devServer本身是一个express服务器，，app是其对应的app;before指的是在app.listen之前执行 app.get(‘/api/user‘, (req, res) => { res.json([{ a: ‘lyra‘ }]); }); }, proxy: { ‘/api‘: { target: ‘‘, // 代理本地服务到目标服务器；相当于nginx，不存在跨域问题 pathRewrite: { ‘^/api‘: ‘‘ // 重写路径；如：/api/user -> /user } } } },

6. webpack-dev-middleware模拟实现webpack-dev-server

const express = require(‘express‘); const WebpackDevMiddleware = require(‘webpack-dev-middleware‘); const webpack = require(‘webpack‘); const webpackConfig = require(‘./webpack.config.js‘); const app = express(); // 返回一个编译对象 const compiler = webpack(webpackConfig); // 1.使用webpack-dev-middleware插件启动编译 // 2.使用该插件响应客户端请求的打包文件 app.use(WebpackDevMiddleware(compiler, {})); app.get(‘/api/user‘, (req, res) => { res.json([{ a: ‘name‘ }]); }); app.listen(5000);

通过命令启动

"scripts": { "node": "node devServer.js", "build": "webpack", "dev": "webpack-dev-server --open" },

7. 模块解析规则resolve 1. extensions

当引入文件不写扩展名时，根据extentsions设置的规则，进行文件查找。

module.exports = { ... resolve: { extensions: [‘.js‘, ‘.jsx‘, ‘.json‘] } }

2. alias

给查找路径定义别名，加快文件查找速度。

对于引入npm安装的模块时，它会按照查找规则，依次查找。对于相对路径查找，也会按照相对路径的规则，依次查找。

通过定义alias可以直接按照alias指定的路径查找，避免路径解析消耗的时间。