共计 3946 个字符，预计需要花费 10 分钟才能阅读完成。
GitHub 完整配置文件地址：https://github.com/yhtx1997/webpack4-Instance
由于篇幅过长分三次发布，建议按顺序看 [webpack4] 配置属于自己的打包系统教程（一）—— 基础配置篇 [webpack4] 配置属于自己的打包系统教程（二）—— 资源配置篇 [webpack4] 配置属于自己的打包系统教程（最终篇）—— 环境配置篇
资源配置篇
资源配置篇
ES6 -> ES5
提取 css 到单独文件
css 浏览器兼容前缀补全
css 代码压缩
使用 sass
使用 HTML 模板
清理旧的打包文件
静态资源加载与解析
通过下面的配置 可以在 js 里引入相应的文件，然后进行解析 也可以直接解析相应的文件
配置 babel 将 ES6 转换为兼容性语法（低版本语法 ES5 或 ES3）
安装 babel-loader
npm install -D babel-loader @babel/core @babel/preset-env
babel-loader：使用 Babel 转换 JavaScript 依赖关系的 Webpack 加载器
@babel/core：将 ES6 代码转换为 ES5
@babel/preset-env：决定使用哪些 api 为旧浏览器提供现代浏览器的新特性
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: ‘babel-loader’,
options: {
presets: [‘@babel/preset-env’]
}
}
}
]
}
加载 css
安装提取 css 相关的 npm 包
npm install style-loader css-loader -D
提取 css 相关配置
const path = require(‘path’);
module.exports = {
entry: {
2048: ‘./src/js/2048.js’,
1024: ‘./src/js/1024.js’,
512: ‘./src/js/512.js’
},
output: {
filename: “[name].js”,
path: path.resolve(__dirname, ‘dist’)
},
module: {
rules: [
{
test: /\.css$/, // 匹配所有以 .css 为后缀的文件
use: [// 使用以下 loader 来加载
‘style-loader’,
‘css-loader’
]
}
]
}
}
安装 sass
开发 css 现在多数使用 sass 和 lass，所以配置下 sass 相应的安装 lass 只需要把 sass-loader 切换为 less-loader
npm install sass-loader node-sass -D
配置
{
test: /\.scss$/,
use: [
“style-loader”,
“css-loader”,
“sass-loader”
]
}
CSS 分离成文件
方案一 安装 extract-text-webpack-plugin
方案一简单写下，推荐方案二
npm install extract-text-webpack-plugin -D
extract-text-webpack-plugin 提取 css 到单独文件
配置
const ExtractTextPlugin = require(“extract-text-webpack-plugin”);
plugins: [
new CleanWebpackPlugin([‘dist’]),
new HtmlWebpackPlugin({
title:’2048′,
template: ‘./src/index.html’,
minify:true,
hash:true
}),
new ExtractTextPlugin({
filename: ‘css/[name].css’
}),
],
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: “style-loader”,
use: [“css-loader”,”sass-loader”]
})
},
]
}
方案二 安装 MiniCssExtractPlugin 推荐
与 extract-text-webpack-plugin 相比
异步加载
没有重复的编译（性能）
更容易使用
特定于 CSS
npm install mini-css-extract-plugin postcss-loader autoprefixer postcss optimize-css-assets-webpack-plugin -D
mini-css-extract-plugin 提取 css 到单独文件
autoprefixer 浏览器兼容前缀补全（例如 -webkit-）
optimize-css-assets-webpack-plugin 代码压缩
配置
const MiniCssExtractPlugin = require(“mini-css-extract-plugin”);
const OptimizeCSSAssetsPlugin = require(“optimize-css-assets-webpack-plugin”);
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
]
},
plugins: [
new CleanWebpackPlugin([‘dist’]),
new HtmlWebpackPlugin({
title:’2048′,
template: ‘./src/index.html’,
minify:true,
hash:true
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: “css/[name].css”
})
],
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
‘css-loader’,
‘postcss-loader’,
‘sass-loader’,
]
},
]
}
这里需要注意的是需要新建一个 postcss.config.js 文件, 用来配置自动加前缀
module.exports={
plugins: [
require(‘autoprefixer’)({/* …options */})
]
}
加载数据
数据文件包括 JSON 文件，CSV、TSV 和 XML JSON 默认就是支持的，所以如果需要处理剩下的使用下面的方法就可以了
安装提取 数据 相关的 npm 包
npm install csv-loader xml-loader -D
安装提取 数据 相关的 npm 包
{
test: /\.(csv|tsv)$/,
use: [
‘csv-loader’
]
},
{
test: /\.xml$/,
use: [
‘xml-loader’
]
}
加载其他资源
加载其他静态资源都可以使用 file-loader 来加载
npm install file-loader -D
加载图片
{
test: /\.(png|svg|jpg|gif)$/,
use: [
‘file-loader’
]
}
加载字体
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
‘file-loader’
]
}
设定 HtmlWebpackPlugin
当我们真正应用我们写的代码时，需要我们新建 HTML，并且需要我们手动的在 HTML 里引入，使用 HtmlWebpackPlugin 可以让我们不用每次都新建 HTML 以及 手动去引入我们的代码
它会帮我们每次运行 webpack 时新建一个 HTML 并引入所有打包好的 js css
安装
npm install html-webpack-plugin -D
配置 HTML 模板
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);// 引入 HtmlWebpackPlugin
// 官网是将其放到了入口 entry 与出口 output 之间
plugins: [
new HtmlWebpackPlugin({
title: ‘Output Management’，// 表示 HTML title 标签的内容
template: ‘./src/index.html’,// 表示模板路径
minify: true,// 压缩代码
hash: true// 加上哈希值来达到去缓存的目的
})
]
清理 ./dist 文件夹
如果我们使用了哈希值来命名我们的文件，那么每次更该内容都会生成新的文件，同时旧的文件依然存在，这样的话一个是乱，一个是浪费
我们可以使用 CleanWebpackPlugin 在每次打包时都会将之前的旧文件清除掉
安装
npm install clean-webpack-plugin -D
配置
const CleanWebpackPlugin = require(‘clean-webpack-plugin’);
plugins: [
new CleanWebpackPlugin([‘dist’]),// 删除 dist
new HtmlWebpackPlugin({
title: ‘Output Management’，// 表示 HTML title 标签的内容
template: ‘./src/index.html’,// 表示模板路径
minify: true,// 压缩代码
hash: true// 加上哈希值来达到去缓存的目的
})
]
