【webpack4】第五部分 webpack的详细配置
文章目录
6. webpack的详细配置
6.1 entry详细配置
entry四种写法
1. string --> './src/js/index.js'
单入口
打包形成的是一个chunk,输出一个bundle文件,默认chunk的名字是main
2. array --> ['./src/js/index.js','./src/js/add.js']
多入口
但是这种打包最终只会生成一个chunk,输出的也只有一个bundle文件
这种写法只有一个用途就是去解决html热更新问题
3. object --> {index:'./src/js/index.js',add:'./src/js/add.js'}
多入口
有几个入口文件就形成几个chunk,几个bundle
4. 特殊用法
enyrt:{
//所有的入口文件最终都只会生成一个chunk,输出只有一个bundle文件
index:['./src/js/index.js','./src/js/add.js']
//形成一个chunk,输出一个bundle文件
mul:'./src/js/mul.js'
}
其实就是第三种写法和第二种写法相结合
这样写的好处:可以将多个相同类型的进行打包,不用类型的分开打包
例如:
entry:{
jquery:['jquery'],
react:['react','react-dom','react-router-dom']
}
具体代码
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:{
index:'./src/js/index.js',
add:'./src/js/add.js'
},
output:{
filename:"js/[name].js",
path:resolve(__dirname,'build')
},
plugins:[
new HtmlWebpackPlugin()
],
mode:'development'
}
6.2 output详细配置
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:{
index:'./src/js/index.js',
add:'./src/js/add.js'
},
output:{
//文件名称(指定名称+目录)
filename:"js/[name].js",
path:resolve(__dirname,'build'),
// 所有资源引入公共的路径前缀 --> 'js/index.js' --> '/js/index.js'
//一般用于生产环境
publicPath:'/' ,
//非入口chunk命名(除了entry下写的入口文件,其他的都是非入口文件)
chunkFilename:'js/[name]_chunk.js',
// 设置打包库暴露出内容的变量名
library:'[name]_[contenthash]',
// 将变量名添加打哪个上面
libraryTarget:'browser'
},
plugins:[
new HtmlWebpackPlugin()
],
mode:'development'
}
6.3 module 详细配置
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:{
index:'./src/js/index.js',
add:'./src/js/add.js'
},
output:{
//文件名称(指定名称+目录)
filename:"js/[name].js",
path:resolve(__dirname,'build')
},
module:{
rules:[
{
//多个loader使用use
test:/\.css$/,
use:['style-loader','css-loader']
},
{
//单个loader使用loader
test:/\.js$/,
loader:'eslint-loader',
// 排除,不检查node_module
exclude:/node_module/,
//只检查 src
include:resolve(__dirname,'src'),
// 优先执行
enforce:'pre',
// enforce:'post' 延迟执行
}
]
},
plugins:[
new HtmlWebpackPlugin()
],
mode:'development'
}
6.4 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')
},
// 配置省略文件路径的后缀名
extensions: ['.js', '.json', '.jsx', '.css'],
// 告诉 webpack 解析模块是去找哪个目录
modules: [resolve(dirname, '../../node_modules'), 'node_modules']
}
}
6.5 devServer 详细配置
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:'./scr/js/index.js',
output:{
filename:'js/[name].js',
path:resolve(__dirname,'build')
},
module:{
rules:[
{
test:/\.css$/,
use:['tyle-loader','css-loader']
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./scr/index.html'
})
],
devServe:{
// 运行代码的目录
contentBase:resolve(__dirname,'build'),
// 监视contentBase目录下的所有文件,一旦文件发生变化则reload(重新加载)
watchContentBase:true,
// 压缩
compress:true,
// 启动端口号
prot:5000,
//域名
host:'localhost',
// 自动打开浏览器
open:true,
// 开启HMR
hot:true,
// 不要启动服务器的日志信息
clientLogLevel:'none',
//除了一些基本的启动信息,其他内容都不显示
quiet:true,
//出错了不要全屏显示错误
overlay:false,
// 代理服务器(解决开发环境下的关于问题)
//
proxy:{
// 一旦devServer(5000端口)接收到'/api'请求数据,则会把请求转发到另一个服务器上
'/api':{
target:'http://localhost:3000',
// 路径重写,发送请求时将路径重写:以/api开头的去掉,因为另一台服务器不能识别'/api'
pathRewrite:{
'^/api':''
}
}
}
}
}
6.6 optimization 详细配置
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:'./scr/js/index.js',
output:{
filename:'js/[name].js',
path:resolve(__dirname,'build')
},
module:{
rules:[
{
test:/\.css$/,
use:['tyle-loader','css-loader']
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./scr/index.html'
})
],
optimization: {
splitChunks: {
chunks: 'all'
},
// 将当前模块的记录其他模块的 hash 单独打包为一个文件 runtime
// 解决:修改 a 文件导致 b 文件的 contenthash 变化
runtimeChunk: {
name: entrypoint => `runtime-${entrypoint.name}`
},
minimizer: [
new TerserWebpackplugin({
//开启缓存
cache:true,
//开启多进程打包
parallel:true,
// 启动source-map
sourceMap:true
})
]
},
mode:'production'
}
总结
以上就是今天要讲的内容,希望对大家有所帮助!!!