1. 安装： npm install webpack webpack-cli webpack-dev-server -D
2. 创建配置文件：webpack.config.js
插件(plugin)
webpack 打包html资源(html-webpack-plugin)
1. 安装：npm install html-webpack-plugin -D
2. 引入：const HtmlWebpackPlugin = require('html-webpack-plugin')
/*
* 4. plugins(插件)
* */
plugins: [
// 默认会创建一个空的
new HtmlWebpackPlugin({
// 复制"./scr/index.html"文件，并自动引入打包输出的所有资源
template: "./src/index.html",
// 默认是"index.html"名称，通过filename设置输出文件名
filename: "index.html",
// 指定加载打包js文件
// chunks: []
// 压缩html文件
/*minify: {
// 移除空格
collapseWhitespace: true,
// 删除注释
removeComments: true
}*/
}),
// css单独的文件
new MiniCssExtractPlugin({
filename: './styles/[name].css'
}),
// 去除无用css
new PurgecssWebpackPlugin({
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true })
})
]
提取css为单独的文件(mini-css-extract-plugin)
1. 安装：npm install mini-css-extract-plugin -D
2. 引入：const MiniCssExtractPlugin = require('mini-css-extract-plugin')
/*
* 3. loader 处理非javascript资源css,img等
* */
module: {
rules: [
{
// 匹配文件
test: /\.css$/,
// use: ['style-loader', 'css-loader']
use: [MiniCssExtractPlugin.loader, 'css-loader', 'post-loader']
},
{
test: /\.scss$/,
// use: ['style-loader', 'css-loader', 'sass-loader', 'post-loader']
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', 'post-loader']
},
{
test: /\.(png|jpg|gif|jpeg)$/,
loader: "url-loader",
options: {
outputPath: '/images', // 打包输出文件
limit: 10000, // 限制文件大小，超过以base4形式
name: '[name][hash:12].[ext]'
}
},
// html中使用图片时，打包处理
{
test: /\.html$/,
loader: 'html-loader'
},
// 加载font字体
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource'
},
// 解析es6
{
test: '/\.js$/',
exclude: /node_modules/,
use: {
loader: 'babel-loader',
option: {
presets: ['@babel/preset-env'],
plugins: [
[
'@babel/plugin-transform-runtime'
]
]
}
}
}
// eslint 检查js规范
/*{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
fix: true
}
}*/
]
},
plugins: [
// css单独的文件
new MiniCssExtractPlugin({
filename: './styles/[name].css'
}),
]
压缩js(terser-webpack-plugin) 和压缩 css(css-minimizer-webpack-plugin)
# 压缩js(terser-webpack-plugin)
1. 安装：npm install terser-webpack-plugin -D
2. 引入：const TerserPlugin = require('terser-webpack-plugin')
# 压缩css(css-minimizer-webpack-plugin)
1. 安装：npm install css-minimizer-webpack-plugin -D
2. 引入： const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
optimization: {
minimizer: [
new CssMinimizerPlugin(),
new TerserPlugin()
],
},
plugins: [new MiniCssExtractPlugin()],
去除无用css(purgecss-webpack-plugin)
1. 安装：npm install purgecss-webpack-plugin -D
2. 引入：const PurgecssWebpackPlugin = require('purgecss-webpack-plugin')
const glob = require('glob');
const path = require('path');
const PATHS = {
src: path.join(__dirname, 'src')
};
plugins: [
// 去除无用css
new PurgeCssPlugin({
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true })
})
]
外部资源(loader)
webpack 打包css资源
1. 安装：npm install css-loader style-loader -D
webpack 打包less或sass资源
#less使用：
1. 安装：npm install less less-loader -D
#sass使用：
1. 安装：npm install node-sass sass-loader -D
处理css的兼容性(postcss-loader 和 postcss-preset-env)
1. 安装：npm install postcss-loade postcss-preset-env -D
2. pcakage.json中添加
"browserslist": [
"> 1%",
"not dead",
"last 2 version"
]
3. 在src同级创建postcss.config.js文件，并添加
module.exports = {
plugins: [
require('postcss-preset-env')()
]
}
css文件图片打包资源(url-loader 和 file-loader)
1. 安装：npm install url-loader file-loader -D
html文件中图片打包资源(html-loader)
1. 安装：npm install html-loader -D
代码检查(eslint)
1. 安装：npm install eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D
解析ES6
babel-loader: 解析eS6的桥梁, @babel/core: babel核心模块, @babel/preset-env: babel预设，一组babel插件集合
1. 安装 npm install babel-loader @babel/core @babel/preset-env -D
2. 兼容async/await语法:
regeneratorRuntime是webpack打包生成的辅助函数，由babel生成，用于兼容async/await语法
1. npm install @babel/runtime -D
2. npm install @babel/plugin-transform-runtime -D
3. ES6语法降级:
1. 安装 npm install @babel/polyfill -D
2. 安装 npm install core-js@3 -D
module: {
rules: [
{
test: '/\.js$/',
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
{
useBuiltIns: 'usage', // ES6语法降级：@babel/polyfill 按需加载
corejs: 3 // coer-js@3
}
],
plugins: [
[
'@babel/plugin-transform-runtime'
]
]
}
}
}
]
}
合并开发环境和生成环境文件
1. 安装 npm install webpack-merge -D
module: {
rules: [
// css处理
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
},
// scss 处理
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', 'postcss-loader']
},
// 图片处理
{
test: /\.(png|jpg|gif|jpeg)$/,
// loader: "url-loader",
// options: {
// outputPath: 'images', // 打包输出文件
// limit: 10000, // 限制文件大小，超过以base4形式
// name: '[name][hash:12].[ext]'
// },
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 4 * 1024
}
}
},
// html中使用图片时，打包处理
{
test: /\.html$/i,
loader: 'html-loader'
},
{
test: /\.svg/,
type: 'asset/inline'
},
// 加载font字体
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
generator: {
filename: 'static/font/[hash][ext]'
}
},
// 解析es6
{
test: '/\.js$/',
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
{
useBuiltIns: 'usage', // ES6语法降级：@babel/polyfill 按需加载
corejs: 3 // coer-js@3
}
],
plugins: [
[
'@babel/plugin-transform-runtime'
]
]
}
}
}
]
}
