参看：文档地址
视频地址：https://www.bilibili.com/video/av51693431
webpack的作用：代码转换、文件优化、代码分割、模块管理、自动刷新、代码检验、自动发布
2 webpack 常见配置
2.1 安装
npm init -y cnpm i webpack webpack-cli -D # 版本 # "webpack": "^4.41.4" # "webpack-cli": "^3.3.10" # webpack 打包命令 npx webpack
2.2 配置
// webpack.config.js const path = require('path') module.exports = { mode: 'development', // development production(该模式下回自动压缩代码) entry: path.join(__dirname, './src/index.js'), output: { filename: 'bundle.[hash:8].js', path: path.join(__dirname, './build'), } }
2.2.1 自定义打包配置文件
// webpack.config.xxx.js module.exports = { // ... } // 执行命令 // npx webpack --config webpack.config.xxx.js
2.2.2 配置脚本
{
"scripts": {
"dev": "webpack-dev-server --config webpack.config.js --colors",
"build": "webpack --config webpack.config.js --colors"
}
}
2.3 常用插件
webpack-dev-server
cnpm i webpack-dev-server -D
devServer: { port: 8081, progress: true, // 进度条 contentBase: './build', // 指定 build 文件夹作为静态服务 compress: true // 压缩文件 }
html-webpack-plugin - 打包 html 页面：
cnpm i html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
removeAttributeQuotes: true, // 删除双引号
collapseWhitespace: true // 折叠空行
},
hash: true // 添加 hash 戳
})
]
// ...
}
css less loader 配置
cnpm i css-loader less less-loader mini-css-extract-plugin postcss-loader style-loader url-loader -D
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports = {
// ...
plugins: [
new MiniCssExtractPlugin({
filename: path.posix.join('static', 'css/[name].[contenthash].css'),
// disable: false, //是否禁用此插件
// allChunks: true,
// publicPath: '',
options: {
insert: 'head'
}
})
],
module: {
rules: [
{ // css
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// localIdentName:'[name]-[local]-[hash:base64:6]',
publicPath: '../../'
}
},
{
loader: 'css-loader',
options: {
url: true,
modules: {}
}
},
'postcss-loader'
]
},
{ // less
test: /\.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../../'
}
},
{
loader: 'css-loader',
options: {}
},
'less-loader',
'postcss-loader'
]
},
]
}
// ...
}
postcss.config.js
module.exports = { plugins: { 'autoprefixer': { overrideBrowserslist: 'last 5 version' } } }
postcss-loader 配合autoprefixer给样式加前缀。
扫描二维码关注公众号，回复：
8419897 查看本文章
打包 JS CSS 压缩优化：
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin') // 用于优化\最小化CSS
const TerserJSPlugin = require('terser-webpack-plugin') // js 压缩
module.exports = {
// ...
optimization: {
minimize: true,
minimizer: [
new TerserJSPlugin({
cache: true, // 是否缓存
parallel: true, // 并发打包
sourceMap: true,
}),
new OptimizeCSSAssetsPlugin({
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
},
cssProcessorOptions: {
safe: true
}
})
]
},
// ...
}
2.4 ES6 语法转换
cnpm i @babel/preset-env @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime -D
cnpm i @babel/runtime -S
@babel/polyfill 已弃用，参看：core-js@3带来的惊喜、corejs
require("core-js-pure/stable")
require("regenerator-runtime/runtime")
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [ // 预设
["@babel/preset-env", {
"useBuiltIns": "usage",
"targets": {
"chrome": "58",
"ie": "11"
}
}]
],
plugins: [
['@babel/plugin-proposal-decorators', {'legacy': true}], // 装饰器
['@babel/plugin-proposal-class-properties', {'loose': true}], // Class
"@babel/plugin-transform-runtime"
]
}
},
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/
},
]
}
// ...
}
2.5 代码规范
cnpm i eslint eslint-loader -D
// webpack.config.js module.exports = { // ... module: { rules: [ { test: /\.js$/, enforce: 'pre', // previous post，在mormal loader 前置执行 use: { loader: 'eslint-loader', options: { cache: true, fix: true // ESLint自动修复功能 } }, enforce: 'pre', // previous post exclude: /node_modules/ } ] } // ... }
官方配置地址 => Rules Configuration
// .eslintrc.json { "parserOptions": { "ecmaVersion": 11, "sourceType": "module", "ecmaFeatures": { "globalReturn": true } }, "rules": { }, "env": { "node": true, "commonjs": true, "es6": true } }
2.6 第三方模块使用
以依赖于 jquery 为类，将module中的模块挂载到window上。
cnpm i jquery -S
- 方法一
// expose-loader 暴露全局的loader/内联的loader 到 window上 import $ from 'expose-loader?$!jquery' // pre 前面执行的loader normal--普通loader/内联loader/后置post-loader console.log('window.$',window.$) // 类似于 CDN 引入文件
- 方法二
import $ from 'jquery'
console.log('window.$',window.$)
配置：
// webpack.config.js module.exports = { // ... module: { rules: [ { // 将 jquery 暴露给 window test: require.resolve('jquery'), use: 'expose-loader?$' } ] } // ... }
- 方法三：在每个模块中注入
$对象，不打包jquery：
console.log('$', $) // 在模块中使用，但是 $ 不存在window中
// webpack.config.js module.exports = { // ... plugins: [ new Webpack.ProvidePlugin({ // 在每个模块注入 $ 对象 "$": "jquery" }) ] // ... }
- 方法四：
CDN引入：
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
防止在模块中多次import jquery，导致打包体积变大：
// webpack.config.js module.exports = { // ... externals: { // 不打包 jquery jquery: 'jquery' } // ... }
2.4 webpack打包图片
在js中生成图片、在css插入图片、在html中插入图片
// webpack.config.js module.exports = { // ... module: { rules: [ { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, use: { loader: 'url-loader', options: { name: path.posix.join('static', 'img/[name].[hash:7].[ext]'), esModule: false, limit: 5 * 1024, // outputPath: 'img/', // name: '[name].[hash:7].[ext]', // publicPath:'img/' // publicPath: 'http://www.houfee.top/' // 只为打包的图片添加 地址路径 } } }, ] } // ... }