webpack常见配置信息
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//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//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: ‘http://localhost3000‘, // 代理本地服务到目标服务器;相当于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指定的路径查找,避免路径解析消耗的时间。
module.exports = { //... resolve: { alias: { Utilities: path.resolve(__dirname, ‘src/utilities/‘), Templates: path.resolve(__dirname, ‘src/templates/‘) } } };
引入alias之前:
import Utility from ‘../../utilities/utility‘;
引入之后
import Utility from ‘Utilities/utility‘;
另外,别名最后加上$表示,严格匹配,即使用时只能是别名,其他的都不匹配。
module.exports = { //... resolve: { alias: { xyz$: path.resolve(__dirname, ‘path/to/file.js‘) } } };
示例:
import Test1 from ‘xyz‘; // 严格匹配,按照别名解析 import Test2 from ‘xyz/file.js‘; // 不严格匹配,按照原来的解析规则解析
3. modules
指定查找的模块,也可以在默认规则上添加其他需要查找的模块
module.exports = { //... resolve: { modules: [‘node_modules‘, ‘myloaders‘] //后者是自定义的模块 } };
4. mainFields
定义入口文件字段的查找顺序
module.exports = { //... resolve: { //定义了先查找package.json中的browser字段... mainFields: [‘browser‘, ‘module‘, ‘main‘] } };
5. mainFiles
当解析文件夹目录的时候,会按照该字段查找文件夹中的文件
module.exports = { //... resolve: { mainFiles: [‘index‘] //也可以修改为main.js等 } };
8.resolveLoaders
属性和规则同resolve, 对应的是处理模块的loader的查找规则。
module.exports = { //... resolveLoader: { modules: [‘node_modules‘], extensions: [‘.js‘, ‘.json‘], mainFields: [‘loader‘, ‘main‘] } };
在module中按照rules使用loaders进行解析时,查找loader模块默认按照resolveLoader中的定义规则查找。
9. 自定义全局变量webpack.DefinePlugin
该插件中对应的字符串的内容,会被当作代码片段解析。变量对应的值如果是非字符串,要通过JSON.stringify()进行序列化。
new webpack.DefinePlugin({ "PRODUCTION": JSON.stringify(true), "AUTHOR": { "USER": JSON.stringify(‘lyra‘) // 字符串也需要序列化,否则按照表达式处理 } }),
10. 环境变量process.env.NODE_ENV
在代码中可以通过访问process.env.NODE_ENV来获取当前项目的mode值。
应用:
可以根据该值来封装函数,实现在不同环境下的不同表现。
const oldLog = console.log; // 覆盖原来的日志函数 console.log = function newlog() { if (process.env.NODE_ENV === ‘development‘) { oldLog(‘开发环境打印日志‘); } }; //使用时,引入该文件 import ‘./console‘; console.log("node_env", process.env.NODE_ENV);
11. glob匹配多入口文件
glob是一个匹配文件的工具。
npm i glob
如果需要实现多个入口文件,使用多个html模版文件。我们可以将入口文件统一放入entries文件中;将模版文件统一放入templates文件夹中。且名称一一对应。
则不在需要一个个添加html-webpack-plugin插件。可以批量操作。
const glob = require(‘glob‘); const files = glob.sync(‘./src/entries/*.js‘); //获取匹配的所有文件路径 const entries = {}; const templates = []; files.forEach((file) => { const fileName = path.basename(file, ‘.js‘); //获取文件的名称,不含扩展名 entries[fileName] = file; templates.push(new HtmlWebpackPlugin({ template: `./src/templates/${fileName}.html`, filename: `${fileName}.html`, // hash: true, chunks: [fileName], // 指定各自的chunk块,否则所有chunk将都引入 chunksSortMode: ‘manual‘ })); });
12. 日志优化stats
webpack编译时打印的日志多数是无效日志,我们通过设置stats的值自定义显示的代码。
stats默认是"normal"。
module.exports = { //... stats: ‘normal‘ };
还可以是其他值,如
1. errors-only //只打印错误信息 2. errors-warnings // 错误和警告 3. verbose // 打印所有的信息 4. minimal // 只打印错误和新的编译 5. none // 不打印
如果想要更清晰,可以使用friendly-errors-webpack-plugin插件(作用不大)。
module.exports = { // ... plugins: [ new FriendlyErrorsWebpackPlugin(), ], }
13. 实现ES6等新API的兼容问题polyfill
一般会推荐使用babel-polyfill,用法
import ‘babel-polyfill‘;
但是该方法会增大打包文件的体积,而且对于不需要的浏览器也会打包。
为了解决这些问题,可以使用
<script src="https://polyfill.io/v3/polyfill.min.js/"></script>
该接口可以根据UserAgent返回需要的polyfills。如果是Chrome浏览器,将返回空内容,因为它不需要polyfills。
13. stats.json
npx webpack --profile --json > stats.json
通过名称生成stats.json文件,里面包含打包的所有信息。主要有几个属性:
1. chunks
代码块。生成代码的途径:
1. 入口文件会生成对应的chunk
output: { filename: ‘[name].[contenthash].js‘ //hot:true下不能contenthash }
2. 动态导入模块会生成对应的chunk(import())
这类代码块的chunk命名规则如下 import(/* webpackChunkName: "example" */‘./example‘)
3. splitChunk会生成分割的代码chunk(代码块)
optimization: { splitChunks: { cacheGroups: { vendors: { chunks: ‘initial‘, //必须有,默认是async(import());initial是同步,不设置该值不会生成代码块 name: ‘vendors‘, //设置代码块名称 test: /node_modules/, //指定要打包的模块 minSize: 50*1024, // 打包最小体积 priority: 1 }, commons: { chunks: ‘initial‘, name: ‘commons‘, test: /src/, minChunks: 2, // 至少被minChunks个module引用过 priority: 2 } } } },
2. modules
在webpack中一切皆模块。每个js,css,image等都是模块。
webpack本身只能识别js文件,对于任何非js文件都需要通过loader进行编译, 最终将其编译为js输出。
3. assets
最后打包生成的所有文件都是assets。