2021-8-24 Webpack
提取CSS成一个单独的文件
npm i mini-css-extract-plugin --s
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
entry: './src/js/index.js',
output:{
filename:'js/built.js',
path:path.resolve(__dirname,'build')
},
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'
})
],
mode:'development'
}
CSS兼容性处理
npm i postcss-loader postcss-preset-env --s
webpack.config.js
rules: [
{
test: /\.css$/,
use: [
//创建style标签,将样式放入
// 'style-loader',
//这个loader取代style-loader。作用:提取js中css成单独文件
MiniCssExtractPlugin.loader,
//将css文件整合到js文件中
'css-loader',
/*
* css兼容性处理:postcss-->postcss-loader post-css-preset-env
* 帮助postcss找到package.json中browerslist里面的配置,通过配置加载指定的css兼容性样式
* */
//使用loader的默认配置
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
//postcss的插件
require('postcss-preset-env')
]
}
}
]
}
]
package.json
"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"
]
}
压缩CSS
npm i optimize-css-assets-webpack-plugin --s
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
//对输出的css文件进行重命名
filename: 'css/built.css'
}),
//压缩css
new OptimizeCssAssetsWebpackPlugin()
],
js语法检查eslint
npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import --s
webpack.config.js
rules: [
{
test: /\.css$/,
use: [
/*
* 语法检查:eslint-loader eslint
* 注意:只检查自己写的源代码,第三方的库时不用检查的
* 设置检查规则:
* package.json中eslintConfig中设置
* airbnb --> eslint-config-airbnb-base eslint eslint-plugin-import
* */
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
//自动修复eslint的错误
fix: true,
}
}
]
package.json
"eslintConfig": {
"extends": "airbnb-base"
}
js兼容性处理eslint
1.基本js兼容性处理
npm i babel-loader @babel/core @babel/preset-env --s
rules: [
/*
* js兼容性处理:babel-loader @babel/core @babel/preset-env
1.基本js兼容性处理 --> @babel/preset-env
问题:只能转换基本语法,如promise不能转换
2.全部js兼容性处理 --> @babel/polyfill
问题:我只要解决部分兼容性问题,但是将所有兼容性代码全部引入,体积太大了
3.需要做兼容性处理的就做:按需加载 --> core-js
* */
{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader',
options:{
//预设:指示babel做怎么样的兼容性处理
presets:['@babel/preset-env']
}
}
]
2.全部js兼容性处理
npm i @babel/polyfill --s
index.js
import '@babel/polyfill'
3.需要做兼容性处理的就做:按需加载
npm i core-js --s
rules: [
/*
* js兼容性处理:babel-loader @babel/core @babel/preset-env
* */
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
//预设:指示babel做怎么样的兼容性处理
presets: [
[
'@babel/preset-env',
{
//按需加载
userBuiltIns: 'usage',
//指定core-js版本
corejs: {
version: 3
},
//指定兼容性做到哪个版本浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
}
]
压缩html和js
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
//压缩html代码
minify:{
//移除空格
collapseWhitespace:true,
//移除注释
removeComments:true
}
}),
],
Webpack的优化配置
开发环境性能优化
生产环境性能优化
开发环境性能优化
优化打包构建速度
优化代码调试
生产环境性能优化
优化打包构建速度
优化代码性能
HMR
hot module replacement 热模块替换、模块热替换
作用:一个模块发生改变,只会重新打包这一个模块(而不是打包所有模块)
极大提升构建速度
样式文件:可以使用HMR功能:因为style-loader内部实现了
js文件:默认不能使用HMR功能 --> 需要修改js代码,添加支持HMR功能的代码
注意:HMR功能对js的处理,只能处理非入口js文件的其他文件
html文件:默认不能使用HMR功能,同时会导致问题:html文件不能热更新了
解决:修改entry入口,将html文件引入
entry: ['./src/js/index.js','./src/index.html'],
webpack.config.js
devServer: {
contentBase: path.resolve(__dirname,'build'),
compress:true,
port:3000,
open:true,
//开启HMR功能
//当修改了webpack配置,新配置要想生效,必须重启webpack服务
hot:true
}
index.js
if (module.hot) {
//一旦module.hot为true,说明开启了HMR功能。 -->让HMR功能代码生效
module.hot.accept('./print.js', function () {
//方法会监听 print.js文件的变化,一旦发生变化,其他默认不会重新打包构建
//会执行后面的回调函数
print()
})
}