HMR
1.创建文件
2. 修改配置文件
const
{ resolve } = require('path');
const
HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['./src/js/index.js', './src/index.html'],
output: {
filename: 'js/built.js',
path:
resolve(__dirname, 'build')
},
module:
{
rules: [
// loader 的配置
{
// 处理 less 资源
test: /\.less$/,
use: ['style-loader',
'css-loader', 'less-loader']
},
{
// 处理 css 资源
test: /\.css$/,
use: ['style-loader',
'css-loader']
},
{
// 处理图片资源
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options:
{
limit:
8 * 1024,
name: '[hash:10].[ext]',
// 关闭 es6 模块化
esModule: false,
outputPath:
'imgs'
}
},
{
// 处理 html 中 img 资源
test: /\.html$/,
loader: 'html-loader'
},
{
// 处理其他资源
exclude: /\.(html|js|css|less|jpg|png|gif)/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media'
}
}
]
},
plugins: [
// plugins 的配置
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development',
devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true,
port:
3000,
open:
true,
//
开启 HMR 功能
//
当修改了 webpack 配置，新配置要想生效，必须重新 webpack 服务
hot: true
}
};
- 运行指令: webpack
source-map
1.创建文件
2. 修改配置文件
const
{ resolve } = require('path');
const
HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['./src/js/index.js', './src/index.html'],
output: {
filename: 'js/built.js',
path:
resolve(__dirname, 'build')
},
module:
{
rules: [
// loader 的配置
{
// 处理 less 资源
test: /\.less$/,
use: ['style-loader',
'css-loader', 'less-loader']
},
{
// 处理 css 资源
test: /\.css$/,
use: ['style-loader',
'css-loader']
},
{
// 处理图片资源
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options:
{
limit:
8 * 1024,
name: '[hash:10].[ext]',
// 关闭 es6 模块化
esModule: false,
outputPath:
'imgs'
}
},
{
// 处理 html 中 img 资源
test: /\.html$/,
loader: 'html-loader'
},
{
// 处理其他资源
exclude: /\.(html|js|css|less|jpg|png|gif)/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media'
}
}
]
},
plugins: [
// plugins 的配置
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development',
devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true,
port:
3000,
open:
true,
hot: true
},
devtool: 'eval-source-map'
};
- 运行指令: webpack
oneOf
- 修改配置文件
const
{ resolve } = require('path');
const
MiniCssExtractPlugin = require('mini-css-extract-plugin');
const
OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'
);
const
HtmlWebpackPlugin = require('html-webpack-plugin');
// 定义 nodejs 环境变量：决定使用 browserslist 的哪个环境
process.env.NODE_ENV = 'production';
// 复用 loader
const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
{
// 还需要在 package.json 中定义 browserslist
loader: 'postcss-loader',
options:
{
ident:
'postcss',
plugins:
() => [require('postcss-preset-env')()]
}
}
];
module.exports
= {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path:
resolve(__dirname, 'build')
},
module:
{
rules:
[
{
//
在 package.json 中 eslintConfig --> airbnb
test: /\.js$/,
exclude: /node_modules/,
// 优先执行
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
{
//
以下 loader 只会匹配一个
//
注意：不能有两个配置处理同一种类型文件
oneOf: [
{
test: /\.css$/,
use: [...commonCssLoader]
},
{
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
/*
正常来讲，一个文件只能被一个 loader 处理。
当一个文件要被多个 loader 处理，那么一定要指定 loader 执行的先后顺序：
先执行 eslint 在执行 babel
*/
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {version: 3},
targets: {
chrome: '60',
firefox: '50'
}
}
]
]
}
},
{
test: /\.(jpg|png|gif)/,
loader: 'url-loader',
options:
{
limit:
8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'imgs',
esModule: false
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
exclude: /\.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/built.css'
}),
new
OptimizeCssAssetsWebpackPlugin(),
new
HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
mode: 'production'
};
- 运行指令:webpack
缓存
1 创建文件
- 修改配置文件
const
{ resolve } = require('path');
const
MiniCssExtractPlugin = require('mini-css-extract-plugin');
const
OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'
);
const
HtmlWebpackPlugin = require('html-webpack-plugin');
// 定义 nodejs 环境变量：决定使用 browserslist 的哪个环境
process.env.NODE_ENV = 'production';
// 复用 loader
const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
{
// 还需要在 package.json 中定义 browserslist
loader: 'postcss-loader',
options:
{
ident:
'postcss',
plugins:
() => [require('postcss-preset-env')()]
}
}
];
module.exports
= {
entry: './src/js/index.js',
output: {
filename: 'js/built.[contenthash:10].js',
path: resolve(__dirname,
'build')
},
module: {
rules:
[
{
//
在 package.json 中 eslintConfig --> airbnb
test: /\.js$/,
exclude: /node_modules/,
// 优先执行
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
{
//
以下 loader 只会匹配一个
//
注意：不能有两个配置处理同一种类型文件
oneOf: [
{
test: /\.css$/,
use: [...commonCssLoader]
},
{
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
/*
正常来讲，一个文件只能被一个 loader 处理。
当一个文件要被多个 loader 处理，那么一定要指定 loader 执行的先后顺序：
先执行 eslint 在执行 babel
*/
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: { version: 3 },
targets: {
chrome: '60',
firefox: '50'
}
}
]
],
//
开启 babel 缓存
//
第二次构建时，会读取之前的缓存
cacheDirectory: true
}
},
{
test: /\.(jpg|png|gif)/,
loader: 'url-loader',
options:
{
limit:
8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'imgs',
esModule: false
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
exclude: /\.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/built.[contenthash:10].css'
}),
new OptimizeCssAssetsWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
mode: 'production',
devtool: 'source-map'
};
3.运行指令: webpack
tree shaking
1.创建文件
2.2.
修改配置文件
const
{ resolve } = require('path');
const
MiniCssExtractPlugin = require('mini-css-extract-plugin');
const
OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'
);
const
HtmlWebpackPlugin = require('html-webpack-plugin');
// 定义 nodejs 环境变量：决定使用 browserslist 的哪个环境
process.env.NODE_ENV = 'production';
// 复用 loader
const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
{
// 还需要在 package.json 中定义 browserslist
loader: 'postcss-loader',
options:
{
ident:
'postcss',
plugins:
() => [require('postcss-preset-env')()]
}
}
];
module.exports
= {
entry: './src/js/index.js',
output: {
filename: 'js/built.[contenthash:10].js',
path:
resolve(__dirname, 'build')
},
module:
{
rules:
[
{
//
在 package.json 中 eslintConfig --> airbnb
test: /\.js$/,
exclude: /node_modules/,
// 优先执行
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
{
//
以下 loader 只会匹配一个
//
注意：不能有两个配置处理同一种类型文件
oneOf: [
{
test: /\.css$/,
use: [...commonCssLoader]
},
{
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
/*
正常来讲，一个文件只能被一个 loader 处理.
当一个文件要被多个 loader 处理，那么一定要指定 loader 执行的先后顺序：
先执行 eslint 在执行 babel
*/
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: { version: 3 },
targets: {
chrome: '60',
firefox: '50'
}
}
]
],
//
开启 babel 缓存
//
第二次构建时，会读取之前的缓存
cacheDirectory: true
}
},
{
test: /\.(jpg|png|gif)/,
loader: 'url-loader',
options:
{
limit:
8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'imgs',
esModule: false
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
exclude: /\.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/built.[contenthash:10].css'
}),
new
OptimizeCssAssetsWebpackPlugin(),
new
HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
mode: 'production',
devtool: 'source-map'
};
3.运行指令: webpack
code split
1.创建文件
2.1修改 demo1 配置文件
{ resolve } = require('path');
const
HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//
单入口
//
entry: './src/js/index.js',
entry: {
// 多入口：有一个入口，最终输出就有一个 bundle
index: './src/js/index.js',
test:
'./src/js/test.js'
},
output:
{
// [name]：取文件名
filename: 'js/[name].[contenthash:10].js',
path: resolve(__dirname, 'build')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
mode: 'production'
};
2.2 修改 demo2 配置文件
const
{ resolve } = require('path');
const
HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//
单入口
//
entry: './src/js/index.js',
entry: {
index: './src/js/index.js',
test:
'./src/js/test.js'
},
output:
{
// [name]：取文件名
filename: 'js/[name].[contenthash:10].js',
path: resolve(__dirname, 'build')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
/*
1.
可以将 node_modules 中代码单独打包一个 chunk 最终输出
2.
自动分析多入口 chunk 中，有没有公共的文件。如果有会打包成单独一个 chunk
*/
optimization: {
splitChunks: {
chunks: 'all'
}
},
mode: 'production'前端课程系列
};
2.3 修改 demo3 配置文件
const
{ resolve } = require('path');
const
HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 单入口
entry: './src/js/index.js',
output: {
// [name]：取文件名
filename: 'js/[name].[contenthash:10].js',
path: resolve(__dirname, 'build')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
/*
1.
可以将 node_modules 中代码单独打包一个 chunk 最终输出
2.
自动分析多入口 chunk 中，有没有公共的文件。如果有会打包成单独一个 chunk
*/
optimization: {
splitChunks: {
chunks: 'all'
}
},
mode: 'production'
};
- 运行指令: webpack
lazy loading
1.创建文件
2.修改配置文件
const
{ resolve } = require('path');
const
HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 单入口
entry: './src/js/index.js',
output: {
filename: 'js/[name].[contenthash:10].js',
path: resolve(__dirname, 'build')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
optimization: {
splitChunks: {
chunks: 'all'
}
},
mode: 'production'
};
- 运行指令: webpack
pwa
1.创建文件
2.下载安装包
npm install --save-dev workbox-webpack-plugin
- 修改配置文件
const
{ resolve } = require('path');
const
MiniCssExtractPlugin = require('mini-css-extract-plugin');
const
OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'
);
const
HtmlWebpackPlugin = require('html-webpack-plugin');
const
WorkboxWebpackPlugin = require('workbox-webpack-plugin');
/*
PWA: 渐进式网络开发应用程序(离线可访问)
workbox --> workbox-webpack-plugin
*/
// 定义 nodejs 环境变量：决定使用 browserslist 的哪个环境
process.env.NODE_ENV = 'production';
// 复用 loader
const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
{
// 还需要在 package.json 中定义 browserslist
loader: 'postcss-loader',
options:
{
ident:
'postcss',
plugins: () => [require('postcss-preset-env')()]
}
}
];
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.[contenthash:10].js',
path:
resolve(__dirname, 'build')
},
module:
{
rules:
[
{
//
在 package.json 中 eslintConfig --> airbnb
test: /\.js$/,
exclude: /node_modules/,
// 优先执行
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
{
//
以下 loader 只会匹配一个
//
注意：不能有两个配置处理同一种类型文件
oneOf: [
{
test: /\.css$/,
use: [...commonCssLoader]
},
{
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
/*
正常来讲，一个文件只能被一个 loader 处理。
当一个文件要被多个 loader 处理，那么一定要指定 loader 执行的先后顺序：
先执行 eslint 在执行 babel
*/
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: { version: 3 },
targets: {
chrome: '60',
firefox: '50'
}
}
]
],
//
开启 babel 缓存
//
第二次构建时，会读取之前的缓存
cacheDirectory: true
}
},
{
test: /\.(jpg|png|gif)/,
loader: 'url-loader',
options:
{
limit:
8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'imgs',
esModule: false
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
exclude: /\.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/built.[contenthash:10].css'
}),
new
OptimizeCssAssetsWebpackPlugin(),
new
HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
}),
new WorkboxWebpackPlugin.GenerateSW({
/*
1.
帮助 serviceworker 快速启动
2.
删除旧的 serviceworker
生成一个 serviceworker 配置文件~
*/
clientsClaim: true,
skipWaiting: true
})
],
mode: 'production',
devtool: 'source-map'
};
- 运行指令:webpack
多进程打包
1.创建文件
- 下载安装包
npm install --save-dev thread-loader
3.修改配置文件
const
{ resolve } = require('path');
const
MiniCssExtractPlugin = require('mini-css-extract-plugin');
const
OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'
);
const
HtmlWebpackPlugin = require('html-webpack-plugin');
const
WorkboxWebpackPlugin = require('workbox-webpack-plugin');
/*
PWA: 渐进式网络开发应用程序(离线可访问)
workbox --> workbox-webpack-plugin
*/
// 定义 nodejs 环境变量：决定使用 browserslist 的哪个环境
process.env.NODE_ENV = 'production';
// 复用 loader
const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
{
// 还需要在 package.json 中定义 browserslist
loader: 'postcss-loader',
options:
{
ident:
'postcss',
plugins:
() => [require('postcss-preset-env')()]
}
}
];
module.exports
= {
entry: './src/js/index.js',
output: {
filename: 'js/built.[contenthash:10].js',
path:
resolve(__dirname,
'build')
},
module:
{
rules: [
{
// 在 package.json 中 eslintConfig --> airbnb
test: /\.js$/,
exclude: /node_modules/,
// 优先执行
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
{
//
以下 loader 只会匹配一个
//
注意：不能有两个配置处理同一种类型文件
oneOf: [
{
test: /\.css$/,
use: [...commonCssLoader]
},
{
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
/*
正常来讲，一个文件只能被一个 loader 处理。
当一个文件要被多个 loader 处理，那么一定要指定 loader 执行的先后顺序：
先执行 eslint 在执行 babel
*/
{
test: /\.js$/,
exclude: /node_modules/,
use: [
/*
开启多进程打包。
进程启动大概为 600ms，进程通信也有开销。
只有工作消耗时间比较长，才需要多进程打包
*/
{
loader: 'thread-loader',
options: {
workers: 2
// 进程 2 个
}
},
{
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: { version: 3 },
targets: {
chrome: '60',
firefox: '50'
}
}
]
],
//
开启 babel 缓存
//
第二次构建时，会读取之前的缓存
cacheDirectory: true
}
}
]
},
{
test: /\.(jpg|png|gif)/,
loader: 'url-loader',
options:
{
limit:
8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'imgs',
esModule: false
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
exclude: /\.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/built.[contenthash:10].css'
}),
new
OptimizeCssAssetsWebpackPlugin(),
new
HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
}),
new WorkboxWebpackPlugin.GenerateSW({
/*
1.
帮助 serviceworker 快速启动
2.
删除旧的 serviceworker
生成一个 serviceworker 配置文件~
*/
clientsClaim: true,
skipWaiting: true
})
],
mode: 'production',
devtool: 'source-map'
};
- 运行指令:webpack
externals
1.创建文件
2. 修改配置文件
const
{ resolve } = require('path');
const
HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'production',
externals: {
// 拒绝 jQuery 被打包进来
jquery: 'jQuery'
}
};
- 运行指令:webpack
dll
1.创建文件
2.修改配置文件
const
{ resolve } = require('path');
const
HtmlWebpackPlugin = require('html-webpack-plugin');
const
webpack = require('webpack');
const
AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
// 告诉 webpack 哪些库不参与打包，同时使用时的名称也得变~
new webpack.DllReferencePlugin({
manifest: resolve(__dirname, 'dll/manifest.json')
}),
// 将某个文件打包输出去，并在 html 中自动引入该资源
new AddAssetHtmlWebpackPlugin({
filepath: resolve(__dirname, 'dll/jquery.js')
})
],
mode: 'production'
};
- 运行指令:webpack
