前言
本文來總結下webpack中 css、js、html 代碼常見的處理方式，學習筆記僅供參考。
正文
1、css樣式文件處理
（1）提取css為一個單獨的文件
在我們前面學習了webpack的基礎上，我們知道webpack在打包之后把css樣式文件放在了js中，這樣導致文件比較混亂，我們這一步需要將css樣式文件打包成一個單獨的文件，即從js中抽取出來。
首先需要一個基本的weback環境，然后安裝MiniCssExtractPlugin這個插件，命令如下：
npm i 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文件中這么寫，我們可以換一種書寫方式
在根目錄下新建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
a、基本的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等高級語法。
b、全部的js兼容處理@babel/polyfill
npm i @babel/polyfill -D
然后在入口文件中引入即可
import "@babel/polyfill"
問題：會把所有的js兼容性處理的代碼都引入進來，打包之后代碼體積較大
c、按需加載兼容性處理 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
mode: "production",
3、html代碼的壓縮處理
只需要配置HtmlWebpackPlugin即可。
webpack.cofig.js中配置HtmlWebpackPlugin。
new HtmlWebpackPlugin({ template: "./index.html", minify: { // 移除空格 collapseWhitespace: true, // 移除注釋 removeComments: true, }, }),
寫在最后
以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長之路會持續更新一些工作中常見的問題和技術點。
