Wenpack 打包 - 15. 生产环境配置(提取JS中的CSS、压缩CSS、压缩html、eslint语法检查...)
这里综上所述，多种文件处理打包
1.文件结构
2.代码
a.css
#box1 { width: 100px; height: 100px; background-color: pink; display: flex; backface-visibility: hidden; }
b.css
#box2 { width: 200px; height: 200px; background-color: deeppink; }
iconfont.css
@font-face {font-family: "iconfont"; src: url('../media/iconfont.eot?t=1581833245354'); /* IE9 */ src: url('../media/iconfont.eot?t=1581833245354#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAO0AAsAAAAACFwAAANlAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqDaIM0ATYCJAMUCwwABCAFhG0HWhtSBxHVm8PIfhzGMck6c2bkTSjPG/sePF+69P3d1UUnhRgUQqyA5BBPz9SlMjBVQJUnnZ0EgFmbnT6jIgzdMR78N0/ZUHpuv/3PMeOtBfPb1iBTzAoK2hvgKIFms6qLCLI7kBP1G8auvIibIYBDX0Yji5as2oSNwdgkgJw6fnQ/dsqIqakUbIRAyYkGeY6FrR6oVOCZ//tSz0SxQWFpjFutO7L4EF7VpKpF2v/v79I+/nh2gJ0GGhgNGJALpc5T6DA5Go2jzDd4gIONQo01bWaVV7Xo//9YuiO1Y/7DA0GhMSABjPLWAHgoZaBqkk2FQNVMKhRUeVRoqFokfjG3sQBwgHbAYyABaQePmRtAoYOtDXzQPKybsYNdjTn6Jzsk51GWn7klN3dTXt7mgoKt+fnbLF3f1wEvObPPi9w9uYWb8oo2F5SUnVZ85UOoH/YoIiT8XBtpjZ08atpabuKrnYdfMP5Xt92j72IdaEPrK7QVhw6yY+4m7agtsw8flfcFS+PyBuBKfv5s18BR7fS2trrdPlec//38zRtMpuH/Fsr27bKQ5/Kdpjg37F3bwtqpU22eLw1zz4W1a25tFpg8l4eaeDGTVeWbSVNxY8+5vudH4mHnVczD8/el+Xl/O9pFIoFf378iAg8mUyTzrBn4y5aV1dQ2eU3OzLKpU7jx+o21bNm6dbbO8oyYrDt1ah2SCeVB2Rt8UuSbeXu9/t6NiEgvkouAvTpSVcL/Su3r/gA+CsQ+o2D/yfvdhXV7283+a7sGgOIzLX1g8H+loV/KRkFr0W8VtewwqsQwWUZutYVyyGI8P02plD4H+JnejpSPo+7SOg6CnRIxULSiD2hsBiMMZjRYuEyGADbzwGEUS0936cQFNGKCwEjuABDa8xsUbYkATXvSEAZTBhZdaYQA7UWDwxbpdEGXoWJOfqGhIXpp/zJ1x66WhT6ovGF4r40lJT7hBQtTRLI4zWZq7LAx9oTPkJMqascmFbgd1vWQ044ZHeORPMsk0bJvirtjc56Fhobopf3L1B27ur3pcz9/w/BeG6tpq3C+YGGaXLI4bYGolXurtmt5TfgMOamidmxSATtWM3nIWb5sRsd47BE/ywR107bKeH719ozHAAdjsSVKtBixJEDw5EMREW5LGHZklCt3FM4BAAAA') format('woff2'), url('../media/iconfont.woff?t=1581833245354') format('woff'), url('../media/iconfont.ttf?t=1581833245354') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('../media/iconfont.svg?t=1581833245354#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-icon-test:before { content: "\e633"; } .icon-icon-test1:before { content: "\e63a"; } .icon-icon-test2:before { content: "\e640"; } .icon-icon-test3:before { content: "\e644"; }
index.less
#box { width: 200px; height: 200px; background-image: url('../imgs/angular.jpg'); background-repeat: no-repeat; background-size: 100% 100%; }
index.js
import '../css/index.less'; import '../css/a.css'; import '../css/b.css'; import '../css/iconfont.css'; function add(x, y) { return x + y; } const promise = new Promise(((resolve) => { setTimeout(() => { console.log('定时结束~'); resolve(); }, 1000); })); // 下一行eslint所有规则都失效（下一行不进行eslint检查） // eslint-disable-next-line console.log(add(1, 2)); console.log('promise:', promise);
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack</title> </head> <body> <!--这里是注释啊~--> <div id="box1"></div> <div id="box2"></div> <span class="iconfont icon-icon-test"></span> <span class="iconfont icon-icon-test2"></span> <span class="iconfont icon-icon-test3"></span> <span class="iconfont icon-icon-test1"></span> <div id="box"></div> <img src="./imgs/vue.jpg" alt="vue"> <img src="./imgs/react.png" alt="react"> </body> </html>
webpack.config.js
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
//提取 js 中的 css 成单独文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
//压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 定义nodejs环境变量：决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';
//复用 loader
const commonCssLoader = [
// 这个 loader 取代 style-loader。作用：提取js中的css成单独文件
//MiniCssExtractPlugin.loader 加载不了 less文件中的图片，记录一下坑，使用"style-loader"可以加载。。。
MiniCssExtractPlugin.loader,
//如果只使用loader的默认配置，就直接写字符串，会默认加载。
'css-loader',
// css兼容性处理
//如果要修改配置，就使用对象的形式
{
// 还需要在package.json中定义browserslist
loader: "postcss-loader",
options: {
ident: "postcss",
plugins: () => [
// postcss的插件
require('postcss-preset-env')()
]
}
}
]
module.exports = {
entry: './src/js/index.js',
output: {
filename: "js/built.js",
path: resolve(__dirname, "build")
},
module: {
rules: [
{
test: /\.css$/,
use: [...commonCssLoader]
},
{
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
/*
正常来讲，一个文件只能被一个loader处理。
当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
先执行eslint 再执行babel
*/
// js语法检查(eslint)
{
// 在package.json中eslintConfig --> airbnb
test: /\.js$/,
exclude: /node_modules/,
//当一个文件要被多个loader处理，添加 enforce: "pre"，会被优先执行
enforce: "pre",
loader: "eslint-loader",
options: {
//自动修复eslint的错误
fix: true,
}
},
//js兼容性处理
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: [
[
//@babel/preset-env: 基本js兼容性处理
'@babel/preset-env',
{
//按需处理
//按需加载
useBuiltIns: 'usage',
//指定 core-js 版本
corejs: {
version: 3
},
//指定兼容性做到哪个版本
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
},
// 打包图片资源
{
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'imgs',
esModule: false
}
},
// 打包html资源
{
test: /\.html$/,
loader: 'html-loader'
},
// 打包其它资源
{
exclude: /\.(js|css|less|html|png|jpg|gif)$/,
loader: "file-loader",
options: {
outputPath: "media"
}
}
]
},
plugins: [
//提取 js 中的 css 成单独文件
new MiniCssExtractPlugin({
//对输出文件名进行重命名
filename: 'css/built.css'
}),
//压缩 css
new OptimizeCssAssetsWebpackPlugin(),
new HtmlWebpackPlugin({
template: "./src/index.html",
//压缩 html 代码
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}
})
],
mode: 'production'
}
3.打包
$ webpack
end~
