四.webpack生产环境的基本配置
4.1提取css成单独文件
安装插件mini-css-extract-plugin
//局部
module: {
rules: [
{
test: /\.css$/,
use: [
// 创建 style 标签,将样式放入
// 'style-loader',
// 这个 loader 取代 style-loader。作用:提取 js 中的 css 成单独文件
MiniCssExtractPlugin.loader,
// 将 css 文件整合到 js 文件中
'css-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
// 对输出的 css 文件进行重命名
filename: 'css/built.css'
})
],
4.2css兼容性处理
安装postcss-loader postcss-preset-env
修改配置:
const { resolve } = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
process.env.NODE_ENV = 'development'
module.exports = {
entry: './src/js/index.js',
output: {
filename : 'index.js',
path:resolve(__dirname , 'build')
},
module:{
rules:[
{
test:/\.css$/,
use:[
// 'style-loader',
//这个loader取代style-loader,作用:提取js中的css成单独文件
MiniCssExtractPlugin.loader,
'css-loader',
/**
* css兼容性问题:postcss --> postcss-loader postcss-preset-env
帮postcss找到package.json中browserslist里面的配置,通过配置加载指定的css兼容性样式
可以去github搜索browserslist查看其他配置
"browserslist" : {
//开发环境 --> 需设置node环境变量:process.env.NODE_ENV = development
"development":[
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
//生产环境:默认是生产环境
"production":[
">0.2%",
"not dead",
"not op_mini all"
]
}
*/
// 使用loader的默认配置
// postcss-loader
// 修改loader的配置
{
loader:'postcss-loader',
options:{
ident:'postcss',
plugins:() => {
//postcss的插件
require('postcss-preset-env')()
}
}
}
]
}
]
},
plugins:[
new MiniCssExtractPlugin({file:'css/built.css'})
],
}
修改package.json
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
4.3压缩css
安装optimize-css-assets-webpack-plugin
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets- webpack-plugin')
// 设置 nodejs 环境变量
// process.env.NODE_ENV = 'development';
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
// postcss 的插件
require('postcss-preset-env')()
]
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/built.css'
}),
// 压缩 css
new OptimizeCssAssetsWebpackPlugin()
],
mode: 'development'
};
4.4 js语法检查
安装 eslint-loader eslint eslint-config-base eslint-plugin-import
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry : "./src/index.js",
output:{
filename:'js/built.js',
path:resolve(__dirname,'build')
},
module:{
rules:[
/**
* 语法检查: eslint-loader eslint
* 注意:只检查自己写的与那代码,第三方的库是不用检查的
* 设置检查规则:
package.json中eslintConfig中设置
"eslintConfig":{
"extend" : "airbnb-base"
}
airbnb代码规范
airbnb --> eslint-config-airbnb eslint-plugin-import eslint
*/
{
test:/\.js$/,
exclude:/node_modules/,
loader:'eslint-loader',
options:{
//自动修复eslint错误
fix:true
}
},
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html'
})
]
}
4.5 js兼容性处理
安装babel-loader @babel/core @babel/preset-env @babel/polyfill core-js
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry : "./src/index.js",
output:{
filename:'js/built.js',
path:resolve(__dirname,'build')
},
module:{
rules:[
/**
* js兼容性处理:babel-loader @babel/core
* 1.基本js兼容行处理 --> @babel/preset-env
* 问题:只能转换基本语法,如promise等不能转换
* 2.全部js兼容性处理 --> @babel/ployfill
* 问题:我只要解决部分兼容性问题,但是将所有兼容行代码全部映入,体积太大了
* 在index.js入口文件中添加 import '@babel/polyfill'
* 3.需要做兼容性处理:按需加载 --> core.js
*/
{
test:/\.js$/,
exclude:/node-modules/,
loader:'babel-loader',
options:{
presets:[
'@babel/preset-env',
//按需加载添加以下代码
{
useBuiltIns:'usage',
//指定core-js的版本
corejs:{
version:3
},
//指定兼容性做到哪个版本的浏览器
targets:{
chrome:'60',
firefox:'60',
ie:'9',
safari:'10',
edge:'17'
}
}
]
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html'
})
]
}
4.6 js压缩
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry : "./src/index.js",
output:{
filename:'js/built.js',
path:resolve(__dirname,'build')
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
})
],
mode:'production'
}
4.7 html压缩
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry : "./src/index.js",
output:{
filename:'js/built.js',
path:resolve(__dirname,'build')
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
minify:{
//移除空格
collapseWhitespace:true,
//移除注释
removeComments:true
}
})
],
//生产环境下会自动压缩js代码
mode:'production'
}
4.8 生产环境配置
const {resolve} = require('path')
const MiniCssExtractPlugin = require('mini-css-tract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
//定义nodejs环境变量:决定使用browserlist的哪个环境
process.env.NODE_ENV = 'production'
//复用loader
const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
{
//还需要再package.json中定义browserslist
loader:'postcss-loader',
options:{
ident:'postcss',
plugins:() => {
require('postcss-preset-env')
}
}
}
]
module.exports = {
entry:'js/built.js',
output:{
filename:'js/built.js',
path:resolve(__dirname,'build')
},
module:{
rules:[
{
test:/\.css$/,
use:[...commonCssLoader]
},
{
test:/\.less$/,
use:[...commonCssLoader,'less-loader']
},
/**
* 正常来讲,一个文件只能被一个文件处理
* 当一个文件要被多个loader处理,那么一定要指定loader执行的先后顺序
* 先执行eslint 再执行Babel
*/
{
//在package.json中eslintConfig --> airbnb
test:/\.js$/,
exclude:/node_modules/,
//优先执行
enforce:'pre',
loader:'eslint-loader',
options:{
fix:true
}
},
{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader',
options:{
presets:[
[
'@babel/preset-env',
{
useBuiltIns:'usage',
corejs:{version:3},
targets:{
chrome:'60',
firefox:'50'
}
}
]
]
}
},
{
test:/\.(jpg|png|gif)/,
loader:'url-loader',
options:{
limit: 8 * 1024,
name:'[hash:10].[ext]',
outputPath:'imgs',
esModule:false
}
},
{
test:/\.html$/,
loader:'html-loader'
},
{
test:/\.(js|css|less|html|jpg|png|gif)/,
loader:'file-loader',
options:{
outputPath:'media'
}
}
]
},
plugins:[
new MiniCssExtractPlugin({
filename:'css/built.css'
}),
new OptimizeCssAssetsWebpackPlugin,
new HtmlWebpackPlugin({
template:'./src/index.html',
minify:{
collapseWhitespace:true,
removeComments:true
}
}),
],
mode:'production'
}