webpack5
js兼容性处理eslint
把上一篇的js语法检查工程文件复制一份,并重命名为js兼容性处理。
当我们js文件使用了ES6以及更高版本的语法时,某些浏览器会不识别其内容,出现运行错误。修改index.js文件内容以es6标准如下
const add = (x, y) => {
return x + y;
}
console.log(add(2, 5));
修改其中的config.js配置文件,进行兼容性处理。
const { resolve } = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');
const eslintwebpackplugin = require('eslint-webpack-plugin')
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
// js兼容性处理:babel-loader @babel/preset-env
// 检测js文件
test: /\.js$/,
// 排除某些官方文件
exclude: /node_modules/,
loader: 'babel-loader',
options: {
//预设:指示babel做怎么样的兼容性处理
presets: ['@babel/preset-env']
}
}
]
},
plugins: [
new HtmlwebpackPlugin({
template: './src/index.html'
}),
],
mode: 'development'
}
然后终端下载两个包。输入npm i babel-loader @babel/core @babel/preset-env -D
,因为该工程是从旧工程复制过来的,所以一些基础的包就不需要重复下载了
然后输入npm run dev
就可以运行了
我们看生成的build文件夹下的src下的built.js,发生了变化。
此时我们再次修改index.js文件内容,增加promise对象。
const add = (x, y) => {
return x + y;
}
console.log(add(2, 5));
const promise = new Promise((resolve) => {
setTimeout(() => {
console.log('定时器执行完了~'); resolve();
}, 1000)
})
console.log(promise);
重新打包后,ie浏览器会报错,说明上述的兼容性处理,只能转换基本的语法,promise则不能。
下边,在配置文件中升级兼容性处理方法。
const { resolve } = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');
const eslintwebpackplugin = require('eslint-webpack-plugin')
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
// 1.基础js兼容性处理:babel-loader @babel/preset-env
//问题:只能转换基本语法,如promise不能转换
//2全部js兼容性处理-- >旧版本是@babel/polyfill,较新的方法是core-js
/问题:我只要解决部分兼容性问题,但是将所有兼容性代码全部引入,体积太大了~
// 检测js文件
test: /\.js$/,
// 排除某些官方文件
exclude: /node_modules/,
loader: 'babel-loader',
options: {
//预设:指示babel做怎么样的兼容性处理
presets: ['@babel/preset-env']
}
}
]
},
plugins: [
new HtmlwebpackPlugin({
template: './src/index.html'
}),
],
mode: 'development'
}
输入npm i @babel/polyfill core-js -D
下载所用的包。@babel/polyfill该包的使用方法,是在js文件中引入即可。
import '@babel/polyfill'
const add = (x, y) => {
return x + y;
}
console.log(add(2, 5));
const promise = new Promise((resolve) => {
setTimeout(() => {
console.log('定时器执行完了~'); resolve();
}, 1000)
})
console.log(promise);
但是这样做是全局引入,生成的处理后的js包太大了,所以需要按需引入,使用core-js包。修改index.js代码。
const add = (x, y) => {
return x + y;
}
console.log(add(2, 5));
const promise = new Promise((resolve) => {
setTimeout(() => {
console.log('定时器执行完了~'); resolve();
},1000)
})
console.log(promise);
修改config.js代码
const { resolve } = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');
const eslintwebpackplugin = require('eslint-webpack-plugin')
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
// 1.基础js兼容性处理:babel-loader @babel/preset-env
//问题:只能转换基本语法,如promise不能转换
//2全部js兼容性处理-- >旧版本是@babel/polyfill,较新的方法是core-js
//问题:我只要解决部分兼容性问题,但是将所有兼容性代码全部引入,体积太大了~
//3.需要做兼容性处理的就做:按需加载
// 检测js文件
test: /\.js$/,
// 排除某些官方文件
exclude: /node_modules/,
loader: 'babel-loader',
options: {
//预设:指示babel做怎么样的兼容性处理
presets: [['@babel/preset-env',
{
//按需加载
useBuiltIns: 'usage',
// 指定版本
corejs: {
version: 3
},
// 指定兼容性做到哪个版本浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10'
}
}
]],
}
}
]
},
plugins: [
new HtmlwebpackPlugin({
template: './src/index.html'
}),
],
mode: 'development'
}
然后输入npm run dev
进行打包。
压缩html和js
复制上一小节工程文件,然后删除build文件夹内容,并重命名,然后修改config.js内代码
const { resolve } = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
plugins: [
new HtmlwebpackPlugin({
template: './src/index.html',
// 压缩html选项
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}
}),
],
//生产环境下会自动压缩js代码
mode: 'production'
}
终端输入npm run build
启动生产环境,生产环境下会自动压缩js代码。压缩html代码只需要配置一些选项。现在查看生成的build文件夹的内容。
可以看到都被压缩成了一行。
生产环境配置汇总
新建工程文件,以及webpack.config.js文件。随后在终端中依次输入:
npm init
webpack_production
npm i webpack webpack-cli -D
npm i html-webpack-plugin -D
npm i less-loader css-loader style-loader -D
npm i url-loader file-loader -D
npm i html-loader -D
npm i mini-css-extract-plugin -D
npm i postcss-loader postcss-preset-env -D
npm i css-minimizer-webpack-plugin -D
npm i eslint-webpack-plugin eslint eslint-config-airbnb-base eslint-plugin-import -D
npm i babel-loader @babel/core @babel/preset-env -D
config.js内代码
const { resolve } = require('path');
const minicssextractplugin = require('mini-css-extract-plugin');
// css浏览器兼容性处理,默认是运行在生产环境下,若要运行于开发环境,还需做以下代码
process.env.NODE_ENV = 'development'
const cssminimizerwebpackplugin = require('css-minimizer-webpack-plugin');
const Htmlwebpackplugin = require('html-webpack-plugin');
const Eslintwebpackplugin = require('eslint-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
// 检测css文件,并打包
test: /\.css$/,
use: [
minicssextractplugin.loader,
'css-loader',
{
// 对css做兼容性处理
// 还需要在package.json中定义browserslist
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [require('postcss-preset-env')()]
}
}
}
]
},
{
// 检测less文件,并打包
test: /\.less$/,
// use内代码,是从下往上的顺序执行的
use: [
minicssextractplugin.loader,
'css-loader',
{
// 还需要在package.json中定义browserslist
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [require('postcss-preset-env')()]
}
}
},
'less-loader'
]
},
// 正常来讲,一个文件只能被一个loader处理,比如一个index.js文件。
//当一个文件要被多个loader处理,那么一定要指定loader执行的先后顺序
// {
// //在package.json中定义eslintConfig --> airbnb
// // js语法检查,webpack4写法
// test: /\.js$/,
// exclude: /node_modules/,
// // 优先执行eslint-loader,对js文件进行处理
// enforce: 'pre',
// loader: 'eslint-loader',
// options: {
// // 自动修复语法检查的报错
// fix: true
// }
// },
{
// js兼容性处理
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,
outputPath: 'imgs',
esModule: false
},
type: 'javascript/auto'
},
{
// 处理html中的图片文件
test: /\.html$/,
loader: 'html-loader',
options: {
esModule: false,
}
},
{
// 处理其他文件,如字体图标等
exclude: /\.(js|css|less|html|jpg|png|gif)$/,
loader: 'file-loader',
options: {
outputPath: 'media',
esModule: false,
},
type: 'javascript/auto'
}
]
},
plugins: [
new minicssextractplugin({
// 打包提取成单独文件
filename: 'css/built.css'
}),
new cssminimizerwebpackplugin(
// 压缩css文件
),
new Htmlwebpackplugin({
template: './src/index.html',
// 压缩html
minify: {
collapseWhitespace: true,
removeComments: true
}
}),
new Eslintwebpackplugin({
// 使用默认配置
fix: true
})
],
// 生产环境下,js自动压缩
mode: 'production'
}
package.json中代码
{
"name": "webpack_production",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.16.5",
"@babel/preset-env": "^7.16.5",
"babel-loader": "^8.2.3",
"css-loader": "^6.5.1",
"css-minimizer-webpack-plugin": "^3.3.1",
"eslint": "^8.5.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.25.3",
"eslint-webpack-plugin": "^3.1.1",
"file-loader": "^6.2.0",
"html-loader": "^3.0.1",
"html-webpack-plugin": "^5.5.0",
"less-loader": "^10.2.0",
"mini-css-extract-plugin": "^2.4.5",
"postcss-loader": "^6.2.1",
"postcss-preset-env": "^7.1.0",
"style-loader": "^3.3.1",
"url-loader": "^4.1.1",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1"
},
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
},
"eslintConfig": {
"extends": "airbnb-base"
}
}
index.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<!-- 使用下载的图标 -->
<span class="iconfont icon-lanbaimao"></span>
<span class="iconfont icon-taozi"></span>
</body>
</html>
index.js代码
import '../css/index.css';
// 引入icon-font样式文件
import '../iconfit/iconfont.css';
function add(x, y) {
return x + y;
}
console.log(add(2, 5));
随后在终端输入npm run build
即可进行打包处理,最后成功打包的工程文件目录如下,build文件夹下为打包后生成的,iconfit文件夹内容为阿里矢量图标库下载图标时,一起下载下来的,image文件夹下内容,为自己找的三个图片。
进行打包后会出现警告,是因为生产环境下,不建议出现console.log()
代码,而我们的index.js中写了一个该代码。
运行build文件夹下生成的index.html,效果正常。