共计 4845 个字符，预计需要花费 13 分钟才能阅读完成。
前文：进击 webpack 4（基础篇 一）
webpack.config.js 基础配置
webpack 有 4 大概念
入口(entry)
输出(output)
loader
插件(plugins)
入口与出口
//webpack.config.js
const path = require(‘path’)
module.exports = {
mode:’development’, // 指定生产还是开发
entry:’./src/index.js’, // 入口文件
output:{
filename:’bundle.js’, // 打包后的文件名
path:path.resolve(__dirname,’./dist’) // 这里需指定一个绝对路径 我们需要 node 的 path 模块去解析路径
}
}
mode: 指定环境是 development 还是 production 决定了打包出来的文件是压缩还是未压缩的
entry：入口起点 (entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。其中分为单入口跟多入口配置 可以是 string，array，object
// entry:’./src/index.js’ 是下面的简写
entry:{
main：‘./src/index.js’
},
output: 包含打包后的名字跟路径，如果是多入口应用，可以设置 filename 为[name].js，entry 里的 key 值会替换掉 name 生成文件夹。
loader
loader 用于对模块的源代码进行转换。
const path = require(‘path’)
module.exports = {
mode:’development’, // 指定生产还是开发
entry:’./src/index.js’, // 入口文件
output:{
filename:’bundle.js’, // 打包后的文件名
path:path.resolve(__dirname,’./dist’) // 这里需指定一个绝对路径 我们需要 node 的 path 模块去解析路径
},
module: {
rules: [] // 包含一系列的规则
}
}
plugin
plugin 是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。
// 代码省略
module: {
rules: [] // 包含一系列规则
},
plugins: [
// new PluginName 去生成 js 对象供给 webpack compiler 调用
]
本地开发配置服务
yarn add webpack-dev-server -D
本地开发需要安装 webpack-dev-server 内部是基于 express 实现的一个服务，可让让服务运行在本地，开发更方便
安装完毕在 dist 目录下新建一个 index.html 并且引入打包好后的 bundle.js
运行 npx webpack-dev-server
并未显示 index.html 需要在 webpack-config.js 配置
plugins: [
// new PluginName 去生成 js 对象供给 webpack compiler 调用
],
devServer:{
contentBase: ‘./dist’, // 当前服务以哪个作为静态资源路径
host:’localhost’, // 主机名 默认是 localhost
port:3000, // 端口配置
open:true, // 是否自动打开网页
}
重新运行 npx webpack-dev-server 自动打开网页并且能正常显示页面
如果觉得 npx 麻烦的话，可以在 package.json 配置脚本
“scripts”: {
“dev”: “webpack-dev-server –config webpack.config.js”
}
样式文件的处理
注意：为了显示效果，不用每次手动修改 html 我们先装一个 html 模板插件
yarn add html-webpack-plugin -D
webpack-config.js 配置
const HtmlWebpackPlugin = require(‘html-webpack-plugin’)
//….
plugins: [
// new PluginName 去生成 js 对象供给 webpack compiler 调用
new HtmlWebpackPlugin({
template:’./index.html’, // 作为模板的文件
filename:’index.html’ // 打包生成后的文件
})
],
进入正题：样式文件分为 css，less scss 之类的 需要各种 loader 先以 css 作为 样例需要先安装 style-loader 跟 css-loader
css 的处理
yarn add style-loader css-loader -D
webpack.config.js 配置
// 代码省略
module: {
rules: [
{
test:/\.css$/,
use:[‘style-loader’,’css-loader’]
}
]
},
rules 里放的是一个个规则对象，test 是匹配到的文件 loader 是从下往上执行，从右往左执行，也就是说命中 css 结尾的文件后 先用 css-loader 去解析，解析完毕后交由 style-loader 插入到 html 模板里
此处 use 内部 有 2 种写法
loader:[‘style-loader’,’css-loader’] // 字符串写法
loader:[‘style-loader’,{loader:’css-loader’,options:{}} 对象写法 在 options 里可以配置你需求的参数
less 的处理
需要安装 less less-loader
yarn add less less-loader -D
//webpack-config.js
module: {
rules: [
{
test:/\.less$/,
use:[‘style-loader’,’css-loader’,’less-loader’]
}
]
},
sass 配置同理
– 给样式加前缀 如 -webkit- 需要安装 autoprefixer，postcss-loader
yarn add postcss-loader autoprefixer -D
根目录需要新建 postcss.config.js
// postcss.config.js
module.exports = {
plugins: [
require(‘autoprefixer’)
]
}
webpack-config.js
rules: [
{
test: /\.less$/,
use: [
“style-loader”,
“css-loader”,
“less-loader”
]
}
]
提取样式文件
yarn add mini-css-extract-plugin -D
//config.js
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)
// 注意 MiniCssExtractPlugin 不能在 development 环境中使用！！
//….
mode:’production’, // 指定生产还是开发
module: {
rules: [
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
“css-loader”,
“less-loader”
]
}
]
},
plugins: [
// new PluginName 去生成 js 对象供给 webpack compiler 调用
new HtmlWebpackPlugin({
template:’./index.html’,
filename:’index.html’
}),
new MiniCssExtractPlugin({
filename: “[name].css”,
chunkFilename: “[id].css”
})
]
//…
– 压缩提取出来的样式文件
需要用到 uglifyjs-webpack-plugin，optimize-css-assets-webpack-plugin
yarn add optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D
//webpack-config.js
module.exports = {
//…
optimization: {// 优化项 这里 OptimizeCSSAssetsPlugin 需要 UglifyJsPlugin
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
]
},
}
js 文件的处理
这里自然轮到我们的 babel 出场啦 把 es6 解析为 es5 需要这几个 loader
yarn add babel-loader @babel/core @babel/preset-env -D
{
test:/\.js/,
use:{
loader:’babel-loader’,
options:{
presets:[
‘@babel/preset-env’
]
}
}
},
es7 的语法类似
class Parent{
}
这种需要 @babel/plugin-proposal-class-properties
yarn add @babel/plugin-proposal-class-properties -D
另外装饰器方面需要
yarn add @babel/plugin-proposal-decorators -D
{
test:/\.js/,
use:{
loader:’babel-loader’,
options:{
presets:[
‘@babel/preset-env’
],
plugins: [
[“@babel/plugin-proposal-decorators”, { “legacy”: true}],
[“@babel/plugin-proposal-class-properties”, { “loose” : true}]
]
}
}
},
像一些 js 内置的 api 比如生成器 这种需要
yarn add @babel/plugin-transform-runtime -D
exclude:/node_modules // 必须配置 不然会解析到 node_modules 里的 js
//….
plugins: [
[“@babel/plugin-proposal-decorators”, { “legacy”: true}],
[“@babel/plugin-proposal-class-properties”, { “loose” : true}]
[“@babel/plugin-transform-runtime”]
]
还有一些 es7 实例上的某些方法。字符串的 include 这些也要转换
yarn add @babel/polyfill -D
需要添加到 entry 上或者在入口文件导入
全局变量的引入问题
有时候我们不想在每个模块都导入某个库或者插件 只需要这样配置
plugins: [
// new PluginName 去生成 js 对象供给 webpack compiler 调用
new webpack.Provide({// 自动在每个模块内先导入了 React
React:’react’
}),
],
静态资源的处理
yarn add file-loader url-loader -D
{
test: /\.png|jpg|gif$/,
use: {
loader:’url-loader’,
options:{
limit:2048 // 小于 2k 的会用 url-loader 转为 base64 否则 file-loader 转为真实 img
outputPath:’static/image/’ // 指定输出目录
},
}
},
预告：多页面配置 跨域 区分不同环境 映射
