大多数情况,我们使用webpack打包单页面应用,有的时候也会遇到多页面的项目 单入口配置 一般情况下的配置模板如下: module.exports = { entry: {}, output: {}, module: {}, plugins: [], devServer: {} } entry 我们的入口文件一般都是JS文件 entry: { entry: './src/entery.js' } output output用来告诉webpack最后打包文件的地址和文件名称 output: { //打包后的文件路径 path: path.resolve(__dirname, 'dist'), //打包后的文件名称 filename: 'bundle.js' } 当然还要引入path模块,这个是nodejs自带的模块;在webpack.config.js文件的头部引入; const path = require('path'); 打包HTML文件 需要使用html-webpack-plugin插件,它会将我们的html模板文件打包,自动生成一个引用了所有webpack打包的文件的新的html文件: 安装: npm install html-webpack-plugin --save-dev 在配置文件的plugins内加载 var HtmlWebpackPlugin = require('html-webpack-plugin'); var path = require('path'); var webpackConfig = { entry: 'index.js', output: { path: path.resolve(__dirname, './dist'), filename: 'index_bundle.js' }, plugins: [new HtmlWebpackPlugin({ minify:{ removeAttributeQuotes: true, collapseWhitespace: true }, template: './src/index.html' })] }; 这将会产生一个包含以下内容的文件dist/index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>webpack App</title> </head> <body> <script src="index_bundle.js"></script> </body> </html> 这样一个最基本的单页面的配置文件如下: const path = require('path'); module.exports = { //入口文件的配置项 entry: { entry: './src/entry.js' }, //出口文件的配置项 output: { //输出的路径,用了Node语法 path: path.resolve(__dirname, 'dist'), //输出的文件名称 filename: 'bundle.js' }, //模块:例如解读CSS,图片如何转换,压缩 module: {}, //插件,用于生产模版和各项功能 plugins: [new HtmlWebpackPlugin({ minify:{ removeAttributeQuotes: true, collapseWhitespace: true }, template: './src/index.html' })] //配置webpack开发服务功能 devServer: {} } 多入口配置 多入口配置的时候只需要在entry中多增加一个入口文件 输出文件的时候将filename的值修改为[name].js,作用是根据入口文件的名称,打包成相同的名称,有几个入口文件,就可以打包出几个出口文件 同时将定义多个HtmlWebpackPlugin插件,有几个页面就配置几项 module.exports = { entry: { client1: './src/client1/client1.js', client2: './src/client2/client2.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: 'js/[name].bundle.js' }, plugins: [ new HtmlWebpackPlugin({ title: 'client1', filename: 'client1.html', template: 'src/client1/client1.html', inject: true, minify: { removeComments: true, collapseWhitespace: true } }), new HtmlWebpackPlugin({ title: 'client2', filename: 'client2.html', template: 'src/client2/client2.html', inject: true, minify: { removeComments: true, collapseWhitespace: true } }) ], };