webpack04----详细配置：entry、output、module、resolve、dev server、optimization
entry：
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// entry: './src/index.js', // string类型 单入口，打包形成一个chunk，输出一个bundle文件，此时chunk的名称默认是main
// entry: ['./src/index.js', './src/add.js'], // array类型 多入口，所有入口文件最终只会形成一个chunk（即使没有使用add.js，也会一起打包到index.js中），输出出去只有一个bundle文件。作用：只有在HMR功能中让html热更新生效，这种方式针对于使用HMR功能才会使用
entry: {
// object类型 多入口，有几个入口文件就形成几个chunk，输出几个bundle文件，此时chunk的名称是key值
index: ['./src/index.js', './src/count.js'], // 所有入口文件最终只会形成一个chunk，输出出去只有一个bundle文件，这种写法不管count.js有没有使用都会把count.js打包到index.js中 场景：dll对第三方库进行单独打包，将多个库打包到成一个chunk 例如 react:['react', 'react-dom', 'react-router-dom'] 将和react有关的库都打包到 'react' 这个chunk下
add: './src/add.js' // 形成一个chunk，输出一个bundle文件
},
output: {
filename: '[name].js', // [name].js 默认生成文件名：main.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: 'js/[name].js', // 文件名称（指定目录+指定名称）
path: resolve(__dirname, 'build'), // 输出文件目录（将来所有资源输出的公共目录）
// publicPath:'/', // 用于生产环境，所有资源引入公共路径前缀 'images/a.jpg' --> '/images/a.jpg'
chunkFilename:'js/[name]_chunk.js', // 非入口chunk的名称----0_chunk.js 利用import动态导入语法可以将某个文件单独打包----import('./add').then(({ default: add }) => {console.log(add(1, 2))})
// library:'[name]', // 整个库向外暴露的变量名 var main = ... 场景：使用dll单独打包时使用
// libraryTarget: 'window', // 作用于browser端，变量名添加到window平台上----window["main"] = ...
// libraryTarget: 'global', // 作用于browser端，变量名添加到node平台上----window["main"] = ...
// libraryTarget: 'commonjs', // exports["main"] = ...
// libraryTarget: 'amd' // define("main", [], function() {})
},
plugins: [new HtmlWebpackPlugin()],
mode: 'development'
}
module：
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'js/[name].js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'] // 多个loader用use数组
},
{
test: /\.js$/,
exclude: /node_modules/, // 排除node_modules下的js文件
include: resolve(__dirname, 'src'), // 只检查 src 下的js文件
enforce: 'pre', // 优先执行 场景：当一种文件被多个loader处理时需要指定loader的执行顺序，一般eslint-loader在babel-loader前执行
// enforce:'post', // 延后执行
loader: 'eslint-loader', // 单个loader用loader属性
options: {} // 其他配置选项
},
{
oneOf: [] // 以下配置只会生效一个
}
]
},
plugins: [new HtmlWebpackPlugin()],
mode: 'development'
}
resolve：
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/[name].js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [new HtmlWebpackPlugin()],
mode: 'development',
resolve: {
alias: {
$css: resolve(__dirname, './src/css') // 配置解析模块路径别名，优点：简写路径----import '$css/index.css'，缺点：路径没有提示
},
extensions: ['.js', '.json', '.jsx', '.css'], // 配置省略文件路径的后缀名默认js文件和json文件可以不写后缀名，这里最好不要加上css，css文件还是写上后缀名不容易出错，----import '$css/index.css' 可以写成 import '$css/index'
modules: [resolve(__dirname, '../../node_modules', 'node_modules')] // 告诉webpack解析模块时去找哪个目录，精确到最外层的node_modules目录，解析速度提高
}
}
dev server：
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/[name].js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [new HtmlWebpackPlugin()],
mode: 'development',
devServer: {
contentBase: resolve(__dirname, 'build'), // 运行代码的目录
watchContentBase: true, // 监视 contentBase 目录下的所有文件，一旦文件发生变化就会 reload
watchOptions: { ignored: /node_modules/ }, // 忽略文件
compress: true, // 启动gzip压缩
port: 5001, // 端口号
host: 'localhost', // 域名
open: true, // 自动打开浏览器
hot: true, // 开启HMR功能
clientLogLevel: 'none', // 不显示启动服务器日志信息
quiet: true, // 除了一些基本启动信息外，其他内容都不要显示
overlay: false, // 如果出错了不要全屏显示
proxy: {
// 服务器代理，解决开发环境跨域问题
'/api': {
target: 'http://localhost:3000', // 一旦devServer（5001）服务器接收到 /api/xxx 的请求，就会把请求转发到另外一个服务器（3000）
pathRewrite: { '^/api': '' } // 发送请求时，请求路径重写：将 /api/xxx --> /xxx （去掉/api）
}
}
}
}
optimization：
1、安装插件：npm i terser-webpack-plugin -D
2、webpack.config.js：
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/[name].[contenthash:10].js',
path: resolve(__dirname, 'build'),
chunkFilename: 'js/[name].[contenthash:10]_chunk.js'
},
plugins: [new HtmlWebpackPlugin()],
mode: 'production',
optimization: {
splitChunks: {
chunks: 'all' // 对于单入口文件可以对node_modules提取公共代码单独打成一个包，mode必须为production
// 以下都是默认值，一般不写
// minSize: 30 * 1024, // 大于30kb的chunk才会去分割
// maxSize: 0, // 最大没有限制
// minChunks: 1, // 要提取的chunk最少被引用1次 例如：import $ from 'jquery'
// maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量
// maxInitialRequests: 3, // 入口js文件最大并行请求数量
// automaticNameDelimiter: '~', // 名称连接符
// name: true, // 可以使用命名规则
// cacheGroups: {
// // 分割chunk的组 满足上面的公共规则，如：大小超过30kb，至少被引用一次
// vendors: {
// test: /[\\/]node_modules[\\/]/, // node_modules文件会被打包到 vendors 组的chunks中 --> vendors~xxx.js
// priority: -10 // 优先级
// },
// default: {
// minChunks: 2, // 要提取的chunk最少被引用2次
// priority: -20, // 优先级
// reuseExistingChunk: true // 如果当前要打包的模块和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
// }
// }
},
/*
问题：index.js中引入了add.js，index.js打包后的文件中记录着add.js文件的hash值，此时如果改动add.js文件但index.js文件未改动再进行打包，两个文件都进行打包了，此时性能降低了。一个js文件的修改导致了另一个js文件的缓存失效
解决：将index.js中记录的hash值单独打包，多了一个 runtime-xxx.js文件，打包后的index.js文件中不再记录hash值，体积减小很多。此时修改add.js但index.js文件不修改再进行打包，只会打包add.js和runtime-xxx.js，index.js不会重新打包
*/
runtimeChunk: {
name: (entrypoint) => `runtime-${entrypoint.name}`
},
minimizer: [
// 配置生产环境的压缩方案：js和css webpack4.26版本以上使用terser-webpack-plugin压缩js代码
new TerserWebpackPlugin({
cache: true, // 开启缓存
parallel: true, // 开启多进程打包
sourceMap: true // 启动source-map
})
]
}
}
x
