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//加上哈希值来达到去缓存的目的
})
]
