webpack一般都是用来打包单页面,但是也有遇到需要打包多页面的时候，
通过网上的教程，略做改动，改成了适合自己项目的配置
这是打包前的目录
这是打包后的目录
在config.js中我主要配置devServer跟插件
const path = require('path'); const {CleanWebpackPlugin} = require('clean-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { mode: "production", entry: {}, devtool: '', devServer: { port: 9000, open: true, // clientLogLevel: 'warning', stats: "errors-only", // overlay: { // warnings: true, // errors: true // }, proxy: { "/": { bypass: function (req, res, proxyOptions) { //配置代理 if (req.headers.accept.indexOf("html") !== -1) { return '/page' + req.originalUrl; } } } } }, plugins: [ new CleanWebpackPlugin(), new MiniCssExtractPlugin({ filename: 'css/[name].css', }) ], module: { rules: [ { test: /\.css$/i, use: [ { loader: MiniCssExtractPlugin.loader, options: { esModule: true, }, }, 'css-loader', ], }, { test: /\.(png|svg|jpg|gif)$/, loader: 'file-loader', options: { esModule: false, outputPath: 'img/' } }, { test: /\.(htm|html)$/i, loader: 'html-withimg-loader' }, { test: /\.js$/, loader: 'babel-loader', query: { presets: ['latest'] //按照最新的ES6语法规则去转换 } } ], }, output: { filename: 'js/[name].min.js', path: path.resolve(__dirname, 'dist'), publicPath: '/' }, };
webpack.config.js配置多页面入口
const webpackConfig = require('./config'); const glob = require('glob'); const HtmlWebpackPlugin = require('html-webpack-plugin'); // 获取指定路径下的入口文件 function getEntries(globPath) { var files = glob.sync(globPath), entries = {}; files.forEach(function (filepath) { if (filepath.match(/\.js$/)) { var split = filepath.split('/'); var fileName = split[split.length - 1]; var name = ''; split.forEach((item, index) => { if (item !== 'src' && item !== 'view' && index !== split.length - 1) { name = name + item + '/' } }); name = name + fileName.substring(0, fileName.length - 3); entries[name] = './' + filepath; } }); return entries; } webpackConfig.entry['api'] = './src/tools/api.js'; webpackConfig.entry['tools'] = './src/tools/index.js'; var entries = getEntries('src/view/**'); Object.keys(entries).forEach(function (name) { webpackConfig.entry[name] = entries[name]; // 每个页面生成一个html var plugin = new HtmlWebpackPlugin({ // 生成出来的html文件名 filename: 'page/' + name + '.html', template: './src/page/' + name + '.html', // 自动将引用插入html inject: true, // 每个html引用的js模块，也可以在这里加上公用模块 chunks: ['api', 'tools', name,], chunksSortMode: function (chunk1, chunk2) { var order = ['api', 'tools', name,]; var order1 = order.indexOf(chunk1); var order2 = order.indexOf(chunk2); return order1 - order2 }, hash: true, minify: { // 压缩HTML文件 removeComments: true, // 移除HTML中的注释 collapseWhitespace: true, // 删除空白符与换行符 minifyCSS: true// 压缩内联css }, }); webpackConfig.plugins.push(plugin); }); module.exports = webpackConfig;
package.json
"devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-latest": "^6.24.1", "clean-webpack-plugin": "^3.0.0", "css-loader": "^3.6.0", "file-loader": "^6.0.0", "glob": "^7.1.6", "html-webpack-plugin": "^4.3.0", "html-withimg-loader": "^0.1.16", "mini-css-extract-plugin": "^0.9.0", "webpack": "^4.44.1", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.0" }
