完善webpack打包配置
有了webpack的基礎配置，還不足以支持打生產環境能夠使用的包，我們還需要增加一些配置。
首先，每次打包前最好能把上一次生成的文件刪除，這里可以用clean-webpack-plugin插件實現：
$ npm i -D clean-webpack-plugin
然后修改webpack基礎配置：
// webpack.base.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
plugins: [
new CleanWebpackPlugin(),
]
}
在生產環境，我們希望部署新版本后能夠丟棄緩存，又希望保留沒有被改動的文件的緩存，而在開發環境，我們希望完全不使用緩存，因此我們需要在當前配置的基礎上，分別擴展生產和開發兩套配置。
// webpack.prod.js 生產環境打包配置
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', // contenthash：只有模塊的內容改變，才會改變hash值
},
plugins: [
new CleanWebpackPlugin(),
]
}
// webpack.dev.js 開發環境的配置
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，讓打包程序真正能夠運行起來：
// config/build.js
const webpack = require('webpack');
const webpackConfig = require('./webpack.prod');
webpack(webpackConfig, function (err, stats) {});
安裝工具并添加啟動命令：
$ npm i -D cross-env
// 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目錄中有已經打包好的文件了：
$ npm run build
打包分析工具
包是打出來了，但是打包好的文件構成是什么樣呢，有沒有按照我們的需要正確打包呢，我們需要一個分析工具來幫助判斷，這就是webpack-bundle-analyzer。
$ npm i -D webpack-bundle-analyzer
我們希望根據打包的命令參數，在打包時自動生成或不生成分析報告。
// webpack.base.js
const argv = require('yargs').argv;
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const merge = require('webpack-merge');
const bundleAnalyzerReport = argv.report; // 根據命令參數是否含有 'report' 來決定是否生成報告
// 這個配置將合并到最后的配置中
const webpackConfig = {
plugins: []
};
if (bundleAnalyzerReport) {
webpackConfig.plugins.push(new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
reportFilename: path.join(config.assetsRoot, './report.html')
}));
}
// 改用merge來合并配置
module.exports = merge(webpackConfig, {
// ...configs
});
在package.json打包命令中增加參數：
"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：
先裝工具：
$ npm i -D style-loader css-loader less less-loader
增加配置：
// webpack.base.js
module: {
rules: [
{
oneOf: [
// ... configs
{
test: /\.(less|css)$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: false // 如果要啟用css modules，改為true即可
}
},
{
loader: 'less-loader',
options: { javascriptEnabled: true }
}
]
},
]
}
]
}
提取css
我們發現打包好的文件中并沒有css，但是css卻可以正常工作，這是因為webpack并沒有把樣式從js中剝離出來。
為了方便管理靜態資源，充分利用緩存，我們需要將css單獨打包。
先安裝工具：
$ npm i -D optimize-css-assets-webpack-plugin
增加打包配置：
// webpack.prod.js
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// ...webpack configs
optimization: {
minimizer: [
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: true ? { map: { inline: false }} : {}
})
]
}
運行打包命令，就能看到生成的css文件。
自動增加css前綴
使用postcss，可以自動為css增加瀏覽器前綴。
安裝依賴：
$ npm i -D postcss-loader autoprefixer
增加webpack配置：
// webpack.base.js，webpack.prod.js
{
test: /\.(less|css)$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: false
}
},
'postcss-loader', // 注意插入的位置，webpack.prod.js也要加這一項?。。? {
loader: 'less-loader',
options: { javascriptEnabled: true }
}
]
},
在根目錄新建postcss.config.js：
module.exports = {
plugins: {
autoprefixer: {}
}
};
在package.json中增加配置：
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8",
"iOS >= 8",
"Firefox >= 20",
"Android > 4.4"
]
postcss-px-to-viewport示例
這里提供一個利用postcss做基于vh，vw布局的配置例子。
安裝依賴：
$ npm i -D postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg
$ npm i -D cssnano cssnano-preset-advanced
修改postcss.config.js：
module.exports = {
plugins: {
'postcss-aspect-ratio-mini': {}, // 處理元素容器的寬高比
'postcss-write-svg': { //處理1px邊框
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, // 這里一定要關掉，否則所有的z-index會被設為1
}
},
autoprefixer: {}
}
};
配置完成后，如果是基于750px寬度設計圖，那么設計圖上1px就直接在樣式中寫1px即可，打包時會自動轉為vw單位。
