一、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 插件的 部分功能
解释： webpack-dev-server 可以开启本地服务器，便于开发
详细请查找 https://www.webpackjs.com/configuration/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形式如下所示：<script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>
-
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']
})
]
}
webpack.config.js完整代码