一、webpack.config.js简单代码
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { //mode 指打包模式 //development 指开发模式，代码未压缩 //production 指产品模式，代码压缩 mode: 'development', //development and production //entry 指明入口文件，webpack 会从这个文件开始连接所有的依赖。 entry: { './js/first': __dirname + '/src/first.js', './js/second': __dirname + '/src/second.js', }, //output 指明出口文件， 即打包后的文件存放的位置 output: { path: __dirname + '/dist', filename: '[name]_bundle_[hash].js', }, //文件加载器 loader //loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript） module: { rules: [ ... ] }, // 本地服务器配置 devServer: { contentBase: './dist', //默认本地服务器所在的根目录 historyApiFallback: true, //是否跳转到index.html inline: true, //源文件改变时刷新页面 port: 8084 //端口号，默认8080 }, //插件 plugins: [ ... ]}
二、webpack.config.js各个模块的介绍
1. mode 介绍
module.exports = { mode: 'production' //或者 development}; 解释： 通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化
development 表示 开发模式，代码不会压缩（有利于断点调试）
production 表示 产品模式， 代码会进行压缩（不利于断点调试）
2. devServer介绍
module.exports = { // 本地服务器配置 devServer: { contentBase: './dist', //默认本地服务器所在的根目录 historyApiFallback: true, //是否跳转到index.html inline: true, //源文件改变时刷新页面 port: 8084 //端口号，默认8080 },} 介绍： 来自 插件的 部分功能
解释： webpack-dev-server 可以开启本地服务器，便于开发
详细请查找
3. module介绍
// loader设置 module: { rules: [ { test: /\.(css|sass|scss)$/, loaders: ['style-loader', 'css-loader'] }, { test: /\.(jsx|js)$/, use: [{ loader: 'babel-loader', options: { presets: [ 'env', 'react', 'stage-0' ] } }] }, { test: /\.xml$/, loaders: ['xml-loader'] }, { test: /\.(png|svg|jpg|gif|mp4)$/, use: [{ loader: 'file-loader', options: { outputPath: './img', publicPath: './img' } }] } ] },
介绍： module.loaders 允许在 webpack 配置中指定多个 loader
例如： babel-loader、style-loader、css-loader、sass-loader、file-loader等，这些都需要先 npm install
那么如何在打包时，将图片文件放置到指定文件夹中呢？
options: { outputPath: './img', //指定放置目标文件的文件系统路径 publicPath: './img' //指定目标文件的自定义公共路径} 通过设置 outputPath 可以使得打包后的文件放置到指定的文件夹中（./img）
4. plugins
plugins: [ new HtmlWebpackPlugin({ //输出html文件1 title: '123', //生成html文件的标题 favicon: './favicon.png', //生成html文件的favicon的路径 filename: 'first.html', //生成html文件的文件名，默认是index.html template: 'first.html', //本地html文件模板的地址 hash: true, chunks: ['./js/first'] }), new HtmlWebpackPlugin({ //输出html文件2 title: '123', favicon: './favicon.png', filename: 'second.html', template: 'second.html', hash: true, chunks: ['./js/second'] }) ] hash：true|false，是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值，添加hash形式如下所示：
chunks：允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk；此处的chunks和 前面的 entry 入口文件 对应entry: { './js/first': __dirname + '/src/first.js', './js/second': __dirname + '/src/second.js',},
5. output
//output 指明出口文件， 即打包后的文件存放的位置 output: { path: __dirname + '/dist', filename: '[name]_bundle_[hash].js', }, 介绍： output 模块指明 项目打包的出口文件
path：表示出口文件的路径
filename：表示出口js文件的命名，此处的[name]对应 entry入口文件的名称，[hash]在每次编译时产生唯一的hash值
6. entry
//entry 指明入口文件，webpack 会从这个文件开始连接所有的依赖。 entry: { './js/first': __dirname + '/src/first.js', './js/second': __dirname + '/src/second.js', }, 介绍： entry 模块 指明 项目的入口js文件， 可以有多个
'./js/first' ： 是指 文件打包后的路径（放置在js文件夹中），和 output 模块中的 [name] 以及 HtmlWebpackPlugin 插件 中的 chunk 对应
三、最后，完整webpack.config.js代码
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { // 模式设置 mode: 'development', //development and production // 入口设置 // 使用babel-polyfill 可以兼容低版本浏览器（不支持es6） entry: { './js/first': ['babel-polyfill', __dirname + '/src/first.js'], './js/second': ['babel-polyfill', __dirname + '/src/second.js'], }, // 出口设置 output: { path: __dirname + '/dist', filename: '[name]_bundle_[hash].js', }, // loader设置 module: { rules: [ { test: /\.(css|sass|scss)$/, loaders: ['style-loader', 'css-loader'] }, { test: /\.(jsx|js)$/, use: [{ loader: 'babel-loader', options: { presets: [ 'env', 'react', 'stage-0' ] } }] }, { test: /\.xml$/, loaders: ['xml-loader'] }, { test: /\.(png|svg|jpg|gif|mp4)$/, use: [{ loader: 'file-loader', options: { outputPath: './img', publicPath: './img' } }] } ] }, // 本地服务器 webpack-dev-server插件，开发中server，便于开发，可以热加载 devServer: { contentBase: './dist', //默认本地服务器所在的根目录 historyApiFallback: true, //是否跳转到index.html inline: true, //源文件改变时刷新页面 port: 8084 //端口号，默认8080 }, // 插件设置 // HtmlWebpackPlugin 可以在开发中按照模板生成 html文件 plugins: [ new HtmlWebpackPlugin({ //输出html文件1 title: '123', //生成html文件的标题 favicon: './favicon.png', //生成html文件的favicon的路径 filename: 'first.html', //生成html文件的文件名，默认是index.html template: 'first.html', //本地html文件模板的地址 hash: true, chunks: ['./js/first'] }), new HtmlWebpackPlugin({ //输出html文件2 title: '123', favicon: './favicon.png', filename: 'second.html', template: 'second.html', hash: true, chunks: ['./js/second'] }) ]}