webpack--css、html|webpack--css、html 和 js 代码的常用处理 webpack--css、html和js代码的常用

文章图片
前言本文来总结下webpack中 css、js、html 代码常见的处理方式，学习笔记仅供参考。
正文 1、css样式文件处理（1）提取css为一个单独的文件
在我们前面学习了webpack的基础上，我们知道webpack在打包之后把css样式文件放在了js中，这样导致文件比较混乱，我们这一步需要将css样式文件打包成一个单独的文件，即从js中抽取出来。
首先需要一个基本的weback环境，然后安装MiniCssExtractPlugin这个插件，命令如下：

npmi mini-css-extract-plugin -D

然后在webpack.config.js中添加如下配置：

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 配置loader module: { rules: [ { test: /\.css$/, use: [ // "style-loader", // 创建style标签将样式放入 //这个loader取代style-loader ,作用是将提取js中的css成单独的文件 MiniCssExtractPlugin.loader, "css-loader", // 将css文件整个到js中 ], }, ], }, // 配置plugin plugins: [ new HtmlWebpackPlugin({ template: "./index.html", }), new MiniCssExtractPlugin({ // 对输出的文件进行重命名 filename:"css/build.css" }), ],

执行webpack打包命令，会发现css文件被单独打包在了css目录下的main.css文件中。
（2）css 兼容性处理
在进行css兼容性处理的时候，需要用到 postcss ,需要执行下面命令下载对应的 loader

npm i postcss-loader postcss-preset-env -D

然后在webpack.config.js如下配置

const { resolve } = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 设置node环境变量： process.env.NODE_ENV="development" module.exports = { entry: "./src/index.js", output: { filename: "build.js", path: resolve(__dirname, "dist"), }, module: { rules: [ { test: /\.css$/, use: [ // "style-loader", // 创建style标签将样式放入 //这个loader取代style-loader ,作用是将提取js中的css成单独的文件 MiniCssExtractPlugin.loader, "css-loader", // 将css文件整个到js中 /* CSS兼容性处理：postcss ==>postcss-loader postcss-preset-env 帮助postcss扎到packae.json 中browserslist里的配置，通过配置加载指定的css兼容样式 "browserlist":{ // 开发环境==》设置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的默认配置 // post-loader // 修改loader配置 { loader:"postcss-loader", options:{ ident:"postcss", plugins:()=>{ require("postcss-preset-env") } } } ], }, ], }, plugins: [ new HtmlWebpackPlugin({ template: "./index.html", }), new MiniCssExtractPlugin({ // 对输出的文件进行重命名 filename:"css/build.css" }), ], mode: "development", };

这里如果出现了以下的报错，是因为postcss-loader这个版本不支持在webpack.config.js文件中这么写，我们可以换一种书写方式

webpack--css、html|webpack--css、html 和 js 代码的常用处理

文章图片

在根目录下新建postcss.config.js文件，加入如下代码，然后注释了postcss-loader中的options对象

module.exports={ ident:"postcss", plugins:()=>{ require("postcss-preset-env") } }

执行打包命令webpack 发现打包之后的css代码会出现前缀等兼容性处理
（3）css代码压缩处理
生产环境经常用到css代码压缩处理，这里需要用到 optimize-css-assest-webpack-plugin 插件，下面命令安装

npm i optimize-css-assets-webpack-plugin -D

然后在webpack.config.js 中添加如下配置

const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")// 引入 // 插件配置添加 plugins: [ // css 代码压缩插件 new OptimizeCssAssetsWebpackPlugin() ],

执行webpack命令，发现css代码被压缩成为一行。
2、JavaScript的代码处理（1）JS 代码的语法检查
开发中为了规范大家的 js 代码，经常用到语法检查 eslint-loader ,这个loader依赖于 eslint库，同时只检查源代码，不会对webpack.config.js 中的代码规范检查，但是需要设置语法检查的规则，常用 airbnb 作为检查规则。首先下载依赖：

npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D

在package.json中添加配置eslintConfig：

"eslintConfig": { "extends": "airbnb-base" }

在webpack.config.js 中配置 loader

{ test: /\.js$/, exclude: /node_modules/, // 排除node_modules loader: "eslint-loader", options: { fix: true,// 自动修复eslint错误 }, },

执行webpack打包命令，会发现我们的 js 代码进行了规范处理。
（2）JS 的兼容性处理
ES6 的一些语法在某些浏览器中并不支持，需要做兼容性处理。需要用到babel-loader 、@babel/core两个核心库，首先下载依赖

npm i babel-loader @babel/core-D

1、基本的js兼容处理：需要用到 @babel/preset-env，安装依赖

npm i @babel/preset-env-D

然后在webpack.config.js 中配置 loader

{ test: /\.js$/, loader: "babel-loader", exclude: /node_modules/, // 排除node_modules options: { // 预设：指示babel做哪些兼容性处理 presets: ["@babel/presets-env"], }, },

问题：不能兼容promise等高级语法。
2、全部的js兼容处理@babel/polyfill

npm i@babel/polyfill-D

然后在入口文件中引入即可

import "@babel/polyfill"

问题：会把所有的js兼容性处理的代码都引入进来，打包之后代码体积较大
3、按需加载兼容性处理 core-js

npm i core-js -D

然后在webpack.config.js 中配置 loader,这里需要注释了第二步的全部兼容性处理。

{ test: /\.js$/, loader: "babel-loader", exclude: /node_modules/, // 排除node_modules options: { // 预设：指示babel做哪些兼容性处理 presets: [ "@babel/presets-env", { useBuiltins: "usage", // 按需加载 corejs: { version: 3, // 指定corejs版本 }, targets: { // 指定兼容到哪些浏览器 chorme: "60", firefox: "60", ie: "9", safiri: "10", edge:"17", }, }, ], }, },

（3）JS 代码的压缩
JS的代码压缩webpack 本身就会执行，只需要将 mode 设置为生产模式即可。webpack本身的 UglifyJsPlugin 会自动执行压缩任务。
webpack.cofig.js中配置mode