目录结构
├─build webpack配置目录 │ ├─plugins.js │ ├─rules.js │ ├─transfromAssets.js //简单的一个插件，处理路径问题 │ └─webpack.config.js └─src ├─components ejs公用组件目录 ├─css ├─js ├─index.ejs 模板文件 └─about.ejs源码地址：github
使用ejs模板安装 ejs-loader、html-loader
在 src根节点创建ejs文件，作为html的模板
使用html-webpack-plugin引入ejs模板
index.ejs 需要向header.ejs传入htmlWebpackPlugin，否则html-webpack-plugin配置的title可能会不起作用
<%= require(\'./components/header.ejs\')({path:\'index\',htmlWebpackPlugin}) %> <div> 内容 </div> <%= require(\'./components/footer.ejs\')() %>header.ejs
<head> <meta charset="utf-8"> <title><%= htmlWebpackPlugin.options.title %></title> </head>webpack plugins，因为是多个页面，所以通过for循环插入HtmlWebpackPlugin
const HtmlWebpackPlugin = require(\'html-webpack-plugin\'); const plugins = []; ... nav.forEach(value => { plugins.push( new HtmlWebpackPlugin({ filename: `${value.path}.html`, template: path.resolve(__dirname, \'../src\', `${value.path}.ejs`), inject: true, chunks: [\'common\', value.path], favicon: \'./src/assets/img/favicon.ico\', title: \'title\', minify: { collapseWhitespace: true } }) ) }) ... 处理css使用了less，所以需要安装loader：css-loader、less-loader
添加浏览器前缀，兼容不同版本浏览器，需要安装postcss-loader、autoprefixer
需要压缩生成的css文件，安装插件：optimize-css-assets-webpack-plugin、cssnano
将css分离成css文件，安装mini-css-extract-plugin
处理js安装下babel-loader、@babel/core、@babel/preset-env，处理es6的语法。
webpack配置plugins.js
const HtmlWebpackPlugin = require(\'html-webpack-plugin\'); const MiniCssExtractPlugin = require(\'mini-css-extract-plugin\'); const optimizeCss = require(\'optimize-css-assets-webpack-plugin\'); const TransfromAssets = require(\'./transfromAssets\'); const path = require(\'path\'); const nav = require(`../src/data.js`).nav; const plugins = []; nav.forEach(value => { plugins.push( new HtmlWebpackPlugin({ filename: `${value.path}.html`, template: path.resolve(__dirname, \'../src\', `${value.path}.ejs`), inject: true, chunks: [\'common\', value.path], favicon: \'./src/assets/img/favicon.ico\', title: \'title\', minify: { collapseWhitespace: true } }) ) }) const otherPlugins = [ new MiniCssExtractPlugin({ filename: \'[name].[hash:8].css\', chunkFilename: \'[id].css\', }), new optimizeCss({ assetNameRegExp: /\.css$/g, cssProcessor: require(\'cssnano\'), cssProcessorOptions: { discardComments: { removeAll: true } }, canPrint: true }), new TransfromAssets() ]; plugins.splice(nav.length, 0, ...otherPlugins); module.exports = plugins;rules.js
const MiniCssExtractPlugin = require(\'mini-css-extract-plugin\'); module.exports = [{ test: /\.(c|le)ss$/, use: [ MiniCssExtractPlugin.loader, \'css-loader\', { loader: "postcss-loader", options: { plugins: [ require("autoprefixer") ] } }, \'less-loader\' ] }, { test: /\.js$/, //js文件加载器 exclude: /node_modules/, use: { loader: \'babel-loader\', options: { presets: [\'@babel/preset-env\'] } } }, { test: /\.html$/, use: [{ loader: \'html-loader\', options: { interpolate: true, minimize: false } }] }, { test: /\.ejs/, use: [\'ejs-loader\'], } ]transfromAssets.js 一个插件，作用：
将common.js删掉（common.js引入了公用的css，css有用但js无用所以就删啦）
将js、css存放至单独的目录，并将html里路径指向正确的路径
function TransfromAssets(options) {};//也可以是一个类 TransfromAssets.prototype.apply = function(compiler) { compiler.plugin(\'emit\', function(compilation, callback) { for (var filename in compilation.assets) { if (/common.*js$/.test(filename)) { delete compilation.assets[filename]; continue; } if (/.*[js|css]$/.test(filename)) { let type = /.*js$/.test(filename) ? \'js\' : \'css\'; let source = compilation.assets[filename].source(); let size = compilation.assets[filename].size(); compilation.assets[`${type}/${filename}`] = { source: () => source, size: () => size } delete compilation.assets[filename]; } if (/html$/.test(filename)) { let source = compilation.assets[filename].source(); source = source.replace(/\<script.*?<\/script>/ig, value => ~value.indexOf(\'common\') ? \'\' : value); source = source.replace(/href=\"\S+?.css\"/ig, value => value.slice(0, 6) + \'css/\' + value.slice(6)); source = source.replace(/src=\".*?.js\"/ig, value => value.slice(0, 5) + \'js/\' + value.slice(5)); compilation.assets[filename].source = () => source; } } callback(); }) }; module.exports = TransfromAssets;webpack.config.js
const path = require(\'path\'); const plugins = require(\'./plugins\'); const rules = require(\'./rules\'); module.exports = { entry: { common: \'@src/js/common.js\', index: \'@src/js/index.js\', detail: \'@src/js/list.js\', }, output: { path: path.resolve(__dirname, \'../dist/\'), filename: "[name].[hash:8].js" }, devServer: { inline: true, historyApiFallback: true, }, resolve: { alias: { \'@\': path.join(__dirname, \'..\'), \'@src\': path.join(__dirname, \'..\', \'src\') } }, module: { rules }, plugins }