Webpack4学习（三）进阶操作 JS+Html 作者：pandali 时间：2021年09月19日 分类：计算机技术,JS,Html 字数：8235 warning: 这篇文章距离上次修改已过277天，其中的内容可能已经有所变动。 ### JS 语法检查 eslint <font color='red'>轻易不要打开，孩子要听劝</font> eslint 需要eslint-loader 依赖eslint 默认是全部文件检查 npm install eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import ##### webpack.config.js ``` rules:[ { /* ** 应该只检查自己的源代码 ** 设置检查规则： ** package.json中eslintConfig中设置~ ** aribnb-->eslint-config-airbnb-base、 eslint、eslint-plugin-import */ enforce:"pre", # 强制优先执行 test:/\.(js)$/, exclude:/node_modeuls/, #排除指定目录 loader:"eslint-loader", options:{ #配置规则 fix:true, # 自动修复错误 } } ] ``` ##### package.json ``` "eslintConfig":{ "extends":"airbnb-base" } ``` ##### 代码中忽略检查 在代码中加入一行注释 ``` // eslint-disable-next-lint ``` ### JS 兼容性处理 ##### 1.基本兼容性操作 npm i babel-loader @babel/core @babel/preset-env @babel/preset-env 只能转换基本语法，如promise不能转换 js文件内容 ``` const add = (a,b)=>{ return a+b; } console.log(add(2,4)); ``` webpack配置 ``` { test:/\.(js)$/, exclude:/node_modules/, loader:"babel-loader", options:{ presets:[ "@babel/preset-env" # 预设：指示babel做什么样的兼容性处理 ] } } ``` ##### 全部JS兼容性处理 npm i @babel/polyfill 直接在css中引入处理即可 <font color='red'> 将全部兼容性代码引入，导致包体太大 </font> js 文件内容 ``` import @babel/polyfill; const promise = new Promise((resolve)=>{ setTimeout(()=>{ console.log("定制器执行"); resolve(); },2000) }) ``` ##### 部分JS兼容性处理 npm i corejs 需要处理的处理，不需要的不进行引入 <font color='red'>与@babel/polyfill 不能同时使用</font> webpack配置 ``` { test:/\.(js)$/, exclude:/node_modules/, loader:"babel-loader", options:{ presets:[ "@babel/preset-env" # 预设：指示babel做什么样的兼容性处理 { useBuiltIns:"usage", #配置按需加载 corejs:{ version:3, #指定corejs的版本 }, targets:{ #指定做到哪个版本的浏览器 chrome:"60", firefox:"60", ie:"9", safari:"10", edge:"17" } } ] } } ``` ### JS 压缩 生产环境会自动压缩js文件 ### Html 压缩 ``` plugins:[ new HtmlWebpackPlugin({ template:"./src/index.html", # 压缩html minify:{ # 移除空格 collapseWhitespace:true, # 移除注释 removeComments:true } }) ] ``` ### 阶段性总结 运行报错，希望有人能帮忙指出原因 ``` /** * 网站目录为 * src/index.js * src/index.html * src/images/*.jpg * src/css/*.css */ const { resolve } = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 将css提取成单独文件 需要安装 npm i mini-css-extract-plugin 插件 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); process.env.NODE_ENV = 'development'; // 帮助postcss找到package.json中browserslist中的配置，通过配置加载指定的css兼容性样式 module.exports = { entry: "./src/index.js", output: { filename: "src/main.js", path: resolve(__dirname, 'dist1') }, module: { /** * 首先处理JS，CSS，Less，图片，html，其他文件 */ rules: [{ test: /\.(js)/, exclude: /node_modules/, loader: "babel-loader", options: { presets: [ "@babel/preset-env", // 预设：指示babel做什么样的兼容性处理 { useBuiltIns: "usage", //配置按需加载 corejs: { version: 3, // 指定corejs的版本 }, targets: { //指定做到哪个版本的浏览器 chrome: "60", firefox: "60", ie: "9", safari: "10", edge: "17" } } ], } }, { test: /\.(css)/, use: [ // "style-loader", MiniCssExtractPlugin.loader, "css-loader", // 帮助postcss找到package.json中browserslist中的配置，通过配置加载指定的css兼容性样式 { loader: "postcss-loader", options: { ident: "postcss", plugins: () => [ require("postcss-preset-env")() ] } } ] }, { test: /\.(less)/, use: [ "style-loader", "css-loader", "less-loader" ] }, { test: /\.(jpg|png|gif|jpeg)/, use: [ "html-loader" ], }, { test: /\.(html)/, use: [ "html-loader" ] }, { exclude: /\.(js|css|less|jpg|png|gif|jpeg|html)/, use: [ "file-loader" ] } ] }, plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html", minify: { removeComments: true, // 去除空格 collapseWhitespace: true } }), new MiniCssExtractPlugin({ filename: "css/main.css" //配置输出的文件名称 }), new CssMinimizerPlugin({ exclude: "/node_modules/" }), // 加载CSS压缩插件 ], mode: "development" } ``` 教学视频中的配置文件 ``` const { resolve } = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); // 定义nodejs环境变量：决定使用browserslist的哪个环境 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: './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 */ { // 在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' }, { exclude: /\.(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' }; ```