完善webpack打包配置
有了webpack的基础配置,还不足以支持打生产环境能够使用的包,我们还需要增加一些配置。
首先,每次打包前最好能把上一次生成的文件删除,这里可以用clean-webpack-plugin插件实现:
1
| $ npm i -D clean-webpack-plugin
|
然后修改webpack基础配置:
1 2 3 4 5 6 7 8
| const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = { plugins: [ new CleanWebpackPlugin(), ] }
|
在生产环境,我们希望部署新版本后能够丢弃缓存,又希望保留没有被改动的文件的缓存,而在开发环境,我们希望完全不使用缓存,因此我们需要在当前配置的基础上,分别扩展生产和开发两套配置。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| const merge = require('webpack-merge'); const baseWebpackConfig = require('./webpack.base'); const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = merge.smart(baseWebpackConfig, { mode: 'production', devtool: sourceMapsMode, output: { filename: 'js/[name].[contenthash:8].js', }, plugins: [ new CleanWebpackPlugin(), ] }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| const merge = require('webpack-merge'); const baseWebpackConfig = require('./webpack.base'); const config = require('./config');
module.exports = merge.smart(baseWebpackConfig, { mode: 'development', output: { filename: 'js/[name].[hash:8].js', publicPath: config.publicPath }, module: { rules: [ { oneOf: [] } ] }, }
|
接下来我们编辑build.js
,让打包程序真正能够运行起来:
1 2 3 4 5
| const webpack = require('webpack'); const webpackConfig = require('./webpack.prod');
webpack(webpackConfig, function (err, stats) {});
|
安装工具并添加启动命令:
1 2 3 4 5 6 7
| // package.json { "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.dev.js", "build": "cross-env NODE_ENV=production node config/build.js" } }
|
然后运行打包命令,就能看到新生成的dist目录中有已经打包好的文件了:
打包分析工具
包是打出来了,但是打包好的文件构成是什么样呢,有没有按照我们的需要正确打包呢,我们需要一个分析工具来帮助判断,这就是webpack-bundle-analyzer。
1
| $ npm i -D webpack-bundle-analyzer
|
我们希望根据打包的命令参数,在打包时自动生成或不生成分析报告。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| const argv = require('yargs').argv; const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const merge = require('webpack-merge');
const bundleAnalyzerReport = argv.report;
const webpackConfig = { plugins: [] }; if (bundleAnalyzerReport) { webpackConfig.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false, reportFilename: path.join(config.assetsRoot, './report.html') })); }
module.exports = merge(webpackConfig, { });
|
在package.json
打包命令中增加参数:
1 2 3
| "scripts": { "build": "cross-env NODE_ENV=production node config/build.js --report" },
|
运行npm run build
,生成的dist目录中会有一个report.html文件,就是我们的分析报告。
支持less和css modules
现在我们使脚手架支持css,less和css modules:
先装工具:
1
| $ npm i -D style-loader css-loader less less-loader
|
增加配置:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| module: { rules: [ { oneOf: [ { test: /\.(less|css)$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { modules: false } }, { loader: 'less-loader', options: { javascriptEnabled: true } } ] }, ] } ] }
|
提取css
我们发现打包好的文件中并没有css,但是css却可以正常工作,这是因为webpack并没有把样式从js中剥离出来。
为了方便管理静态资源,充分利用缓存,我们需要将css单独打包。
先安装工具:
1
| $ npm i -D optimize-css-assets-webpack-plugin
|
增加打包配置:
1 2 3 4 5 6 7 8 9 10 11
| const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
optimization: { minimizer: [ new OptimizeCSSAssetsPlugin({ cssProcessorOptions: true ? { map: { inline: false }} : {} }) ] }
|
运行打包命令,就能看到生成的css文件。
自动增加css前缀
使用postcss,可以自动为css增加浏览器前缀。
安装依赖:
1
| $ npm i -D postcss-loader autoprefixer
|
增加webpack配置:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| { test: /\.(less|css)$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { modules: false } }, 'postcss-loader', { loader: 'less-loader', options: { javascriptEnabled: true } } ] },
|
在根目录新建postcss.config.js
:
1 2 3 4 5
| module.exports = { plugins: { autoprefixer: {} } };
|
在package.json
中增加配置:
1 2 3 4 5 6 7 8
| "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8", "iOS >= 8", "Firefox >= 20", "Android > 4.4" ]
|
postcss-px-to-viewport示例
这里提供一个利用postcss做基于vh,vw布局的配置例子。
安装依赖:
1 2
| $ npm i -D postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg $ npm i -D cssnano cssnano-preset-advanced
|
修改postcss.config.js
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| module.exports = { plugins: { 'postcss-aspect-ratio-mini': {}, 'postcss-write-svg': { utf8: false }, 'postcss-px-to-viewport': { viewportWidth: 750, viewportHeight: 1334, unitPrecision: 3, viewportUnit: 'vw', selectorBlackList: ['.ignore', '.hairlines'], minPixelValue: 1, mediaQuery: false }, cssnano: { 'cssnano-preset-advanced': { zindex: false, } }, autoprefixer: {} } };
|
配置完成后,如果是基于750px宽度设计图,那么设计图上1px就直接在样式中写1px即可,打包时会自动转为vw单位。