一、entry的配置
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
/*
entry: 指定构建的入口起点
1. string
指定一个文件作为入口起点，打包形成一个chunk，输出一个bundle文件
此时，chunk的名称默认是main·
举例：
entry: './src/index.js'
2. array
指定多个文件作为入口起点，所有入口文件最终只会形成一个chunk，输出一个bundle文件
只用于在HMR功能中让模块热替换生效
举例：
entry: ['./src/index.js', './src/index.html']
3. object
有几个键值对就形成几个chunk，输出几个bundle文件，此时chunk的名称就是对应的key名称
举例：
entry: ｛
indexjs: './src/index.js',
indexhtml: './src/index.html'
｝
键值对可以是数组，数组内的所有文件形成一个chunk，输出一个bundle
举例：
entry: ｛
jquery: './src/jquery.js',
vue: ['./src/vue.js', './src/vue-router.js, ./src/axios.js']
｝
*/
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
plugins: [new HtmlWebpackPlugin()],
mode: 'development'
};
二、output的配置
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
// 文件名称（目录+文件名）
// filename: '[name].js', [name]表示chunk的名称
filename: 'built.js',
// 输出文件目录（将来所有资源输出的公共目录）
path: resolve(__dirname, 'build'),
// 所有资源引入公共路径的前缀，设置后src="imgs/a.jpg"就变成src="/imgs/a.jpg"
// 一般用于生产环境
publicPath: '/',
chunkFilename: '[name]_chunk.js', // 非入口chunk的文件名称
library: '[name]' , // 整个库向外暴露的变量名
libraryTarget: 'window' , // 变量名添加到浏览器端
// libraryTarget: 'global' , // 变量名添加到nodejs服务器端
// libraryTarget: 'commonjs' , // 变量名添加到commonjs
},
plugins: [new HtmlWebpackPlugin()],
mode: 'development'
};
三、module的配置
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build'),
},
module：{
rules: [
// loader的配置
{
// 使用正则表达式匹配要处理的文件
test: /\.css$/,
// 多个loader用use
use: ['style-loader', 'css-loader']
},
{
test: /\.js$/,
// 排除node_modules下的js文件
exclude: /node_modules/,
// 优先执行
enforce: 'pre',
// 延后执行
// enforce: 'post',
// 只检查src下的js文件
include: reslove(__dirname, 'src'),
// 单个loader用loader
loader: 'eslint-loader',
// 指定一些配置选项
options: {}
},
{
// 以下配置只会生效一个
oneOf: []
}
]
},
plugins: [new HtmlWebpackPlugin()],
mode: 'development'
};
四、resolve的配置
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build'),
},
module：{
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [new HtmlWebpackPlugin()],
mode: 'development',
// 解析模块的规则
resolve: {
// 配置解析模块路径别名，优点是可以简写路径，缺点是失去了代码提示
alias: {
// 在js文件中引用时，
// import './src/css/index.css';
// 可以写成
// import '$css/index.css';
$css: resolve(__dirname, 'src/css')
},
// 配置省略文件路径的后缀名，优点是可以简写文件名，缺点是同一目录下不同类型的文件也不能重名
// import '$css/index.css';
// 可以写成
// import '$css/index';
extensions: ['.js', '.json', '.css'],
// 告诉webpack解析模块时去找哪些目录
modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
}
};
五、devServer的配置
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build'),
},
module：{
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [new HtmlWebpackPlugin()],
mode: 'development',
devServer: {
// 运行代码的目录
contentBase: resolve(__dirname, 'build'),
// 监视contentBase目录下的所有文件，一旦文件变化就会reload
watchContentBase: true,
watchOptions: {
// 忽略文件
ignored: /node_modules/
},
// 启动gzip压缩
compress: true,
// 端口号
port: 5000,
// 主机名
host: 'localhost',
// 自动打开浏览器
open: true,
// 开启HMR功能
hot: true,
// 启动服务器时不显示日志信息
clientLogLevel: 'none',
// 静默启动：除了一些基本的启动信息外，其他内容都不显示
quiet: true,
// 出现错误不全屏提示
overlay: false,
// 服务器代理，解决开发环境下的跨域问题
proxy: {
'/api': {
// 一旦devServer(5000)服务器接收到以/api开头的请求，就会把请求转发到另外一个服务器(3000)
traget: 'http://localhost:3000',
// 发送请求时，将/api/xxx重写为/xxx
pathRewrite: {
'^/api': ''
}
}
}
}
};
六、optimization的配置
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build'),
},
module：{
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [new HtmlWebpackPlugin()],
mode: 'development',
optimization: {
splitChunks: {
chunks: 'all',
// 代表分割的chunk最小为30kb
minSize: 30 * 1024,
// 最大没有限制
maxSize: 0,
// 要提取的chunk最少被引用1次
minChunks: 1,
// 按需加载时并行加载的文件的最大数量为5
maxAsyncRequests: 5,
// 入口js文件最大并行请求数量
maxInitialRequests: 3,
// 名称连接符
automaticNameDelimiter: '~',
// 可以使用命名规则
name: true,
// 分割chunk的组
cacheGroups: {
// node_modules文件会被打包到vendors组的chunk中
// 命名规则： vendors~xxx.js
// 满足上面的公共规则：如不小于30kb，至少被引用一次
vendors: {
test: /[\\/]node_modules[\\/]/,
// 打包的优先级
priority: -10
},
default: {
// 可以覆盖公共规则
// 要提取的chunk最少被引用2次
minChunks: 2,
// 优先级
priority: -20,
// 如果当前要打包的模块和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
reuseExistingChunk: true
}
}
},
// 将当前模块记录其他模块的hash值单独打包为一个文件runtime
// 解决了修改a文件导致b文件的contenthash值变化
runtimeChunk: {
name: entrypoint => `runtime-${entrypoint.name}`
},
minimizer: {
// 配置生产环境的压缩方案：js和css
new TerserWebpackPlugin({
// 开启缓存
cache: true,
// 开启多进程打包
parallel: true,
// 启用source-map
sourceMap: true
})
}
}
};
