1、我的webpack学习之路(webpack初步认知和webpack基础打包)
2、我的webpack学习之路(webpack基础开发配置）
3、我的webpack学习之路（关于webpack的性能优化）
1、entry
const path = require('path')
const HtmlWebpackPlugin =require('html-webpack-plugin')
function resolve(dir) {
return path.resolve(__dirname,dir)
}
/*
entry: 入口起点
1.string --->'./src/index'
单入口
打包生成一个chunk，输出一个bundle文件
此时chunk的名称默认是 main
2、array ----> ['./src/index','./src/add.js']
多入口
所有入口文件最终只会形成一个chunk，输出出去一个bundle文件。
只有在HMR功能中让html热跟新生效~
3、object ----> ['./src/index','./src/add.js']
多入口
有几个入口文件就形成几个chunk，同时输出几个bundle
此时chunk名称是 key
特殊用法：
{
// 所有入口文件最终只会形成一个chunk，输出出去一个bundle文件。
index: ['./src/index', './src/count.js'],
// 形成一个chunk ，输出一个bundle文件
add: './src/add.js'
}
*/
module.exports = {
// entry: './src/index',
// entry: ['./src/index','./src/add.js'],
entry: {
index: ['./src/index', './src/count.js'],
add: './src/add.js'
},
output: {
filename:'[name].js',
path: resolve('build')
},
plugins: [
new HtmlWebpackPlugin()
],
mode: 'development'
}
2、output
const path = require('path')
const HtmlWebpackPlugin =require('html-webpack-plugin')
function resolve(dir) {
return path.resolve(__dirname,dir)
}
module.exports = {
entry: './src/index',
output: {
// 文件名称（指定名称+目录）
filename:'js/[name].js',
// 输出文件目录（将来所有资源输出的公共目录）
path: resolve('build'),
// 所有资源引入公共路径前缀 --> 'imags/a.ipg' --> '/imags/a.jpg'
publicPath: '/',
chunkFilename: '[name]_chunk.js', // 非入口chunk的名称
// library: '[name]', // 整个库向外暴露的变量名 通常结合dll使用
// libraryTarget: 'window' // 变量名添加到那个上 browser
// libraryTarget: 'global' // 变量名添加到那个上 node
// libraryTarget: 'commonjs'
},
plugins: [
new HtmlWebpackPlugin()
],
mode: 'development'
}
3、module
const path = require('path')
const HtmlWebpackPlugin =require('html-webpack-plugin')
function resolve(dir) {
return path.resolve(__dirname,dir)
}
module.exports = {
entry: './src/index',
output: {
filename:'js/[name].js',
path: resolve('build')
},
module: {
rules: [
// loader配置
{
test: /\.css$/,
// 使用多个louder
use: ['style-loader', 'css-loader']
},
{
test: /\.js$/,
// 排除node_modules 下的js文件
exclude: /node_modules/,
// 只检查src下的js文件
include: resolve('src'),
enforce: 'pre', // 优先执行
// enforce: 'post', // 延后执行
// 使用一个louder
loader: 'eslint-loader',
options: {}
},
{
// 一下配置只会生效一个
oneOf: []
}
]
},
plugins: [
new HtmlWebpackPlugin()
],
mode: 'development'
}
4、resolve
const path = require('path')
const HtmlWebpackPlugin =require('html-webpack-plugin')
function resolve(dir) {
return path.resolve(__dirname,dir)
}
module.exports = {
entry: './src/js/index.js',
output: {
filename:'js/[name].js',
path: resolve('build')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin()
],
mode: 'development',
// 解析模块的规则
resolve: {
// 配置解析模块路基别名:简写路径 缺点写路基没有提示
/*
//index.js
import './css/index.css' => import '$css/index.css'
*/
alias: {
$css: resolve('src/css')
},
// 配置省略文件路径后缀名
/*
//index.js
import './css/index.css' => import './css/index'
*/
extensions: ['.js','.json','.jsx', '.css'],
// 告诉webpack 解析模块时去找那个目录
modules: [resolve('../../node_modules'),'node_modules']
}
}
5、devServer
const path = require('path')
const HtmlWebpackPlugin =require('html-webpack-plugin')
function resolve(dir) {
return path.resolve(__dirname,dir)
}
module.exports = {
entry: './src/js/index.js',
output: {
filename:'js/[name].js',
path: resolve('build')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin()
],
mode: 'development',
/*
开发服务器 devServer :用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~）
特点：只会在内存中打包，不会有任何输出
启动devServer指令为 npx webpack-dev-server
*/
devServer: {
// 项目构建后路径 运行代码目录
contentBase: resolve('build'),
// 见识 contentBase 目录下的所有文件，一旦文件变化就会 reload
watchContentBase: true,
watchOptions: {
// 忽略文件
ignored: /node_modules/
},
// 启动gzip压缩
compress: true,
// 端口号
port: 3000,
// 域名
host: 'localhost',
// 自动打开浏览器
open: true,
// 开启HMR功能
hot: true,
// 不要显示启动服务器日志详细
clientLogLevel: 'none',
// 除了一些基本启动信息以外，其他内容都不要显示
quiet:true,
// 如果出错了，不要全屏提示~
overlay: false,
// 服务器代理 --> 解决开发环境跨域问题
proxy: {
// 一旦devServer（5000）服务器接收到 /api/xxx 的请求，就会吧请求转发到另外一个服务器（3000）
'/api': {
target: 'http://localhost:3000',
// 发送请求是，请求路径重写：将 /api/xxx ---> /xxx (去掉api)
parthRewrite: {
'^/api': ''
}
}
}
}
}
6、optimization
const path = require('path')
const HtmlWebpackPlugin =require('html-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')
function resolve(dir) {
return path.resolve(__dirname,dir)
}
module.exports = {
entry: './src/js/index.js',
output: {
filename:'js/[name].[contenthash:10].js',
path: resolve('build')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin()
],
mode: 'production',
// 解析模块的规则
resolve: {
// 配置解析模块路基别名:简写路径 缺点写路基没有提示
alias: {
$css: resolve('src/css')
},
// 配置省略文件路径后缀名
extensions: ['.js','.json','.jsx', '.css'],
// 告诉webpack 解析模块时去找那个目录
modules: [resolve('../../node_modules'),'node_modules']
},
optimization: {
splitChunks: { //用来做代码分割
chunks: 'all',
// 默认值， 可以不写
/*minSize: 30 * 1024, // 分割的chunk最小为30kb
maxSize: 0, // 最大没有限制
minChunks: 1, // 要提货的chunk最少要被应用一次
maxAsyncRequests: 5, // 按需加载时并行加载的文件最大数量是5
maxInitialRequests: 3, // 入口js最大并行请求数量
automaticNameDelimiter: '~', // 名称链接符
name: true, // k可以使用命名规则
cacheGroups: { // 分割chunk的组
// node_modules 文件会被打包到 vendoes 组的chunk中。 ---> vendors~xxx.js
// 满足上面公共规则：如：大小超过30kb，最少被应用一次
vendors: {
test:/[\\/]node_modules[\\/]/,
// 优先级
priority: -10
},
default: {
// 要提取的chunk 最少被引用2次
minChunks: 2,
priority: -10,
// 如果当前要打包的这个模块和之前已经被提取的某块是同一个就会服用，而不是重新打包模块
reuseExistingChunk: true
}
} */
},
// 将当前模块的的记录其他模块的hash单独打包为一个文件 runtime
// 解决 修改a文件导致把文件的contenthash变化
runtimeChunk: {
name: entrypoint => `runtime-${entrypoint.name}`
},
minimize:true,
minimizer: [
// 配置生产环境的压缩方案：js和css
new TerserWebpackPlugin({
test: /\.js(\?.*)?$/i
// cache: true, // 开启缓存
// parallel: true, //开启多进程打包
// // 启动source-map
// sourceMap: true
})
]
}
}
扫一扫
477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
