3 webpack處理js
- webpack的核心——處理js文件，將模塊化的代碼打包。
- 具體操作如下
- es6轉化（為兼容老瀏覽器，將es6轉化為es5）
- babel-loader
- 代碼規范（例如空格，縮進等代碼風格規范）
- eslint
- 代碼分割和打包（webpack本職工作）
- webpack的自身核心功能
- es6轉化（為兼容老瀏覽器，將es6轉化為es5）
3.1 es6轉化——babel-loader
定義編譯配置（options或.babelrc）。
3.1.1 babel-loader寫入webpack配置
1 安裝babel-loader
step1 安裝babel-loader
- babel-loader只是接口，本身不做編譯工作（編譯使用@babel/core包），因此要安裝2個包——babel-loader & @babel/core
- 命令：
npm install babel-loader @babel/core --save-dev
–save, 作為開發依賴安裝（編譯步驟是開發階段完成的）
loader作用: 定義對某種類型文件的處理方案
2 配置babel-loader
step2 配置babel-loader
loader和use是兩個配置方式，對應3種配置方法。
// webpack.config.js
module.exports = {// loadermodule: {rules: [{// 每個對象是一個loadertest: /\.js$/,loader: "babel-loader", // 寫法1// use: ["babel-loader", "xxx-loader"],// 寫法2 按照數組順序依次使用loader處理文件// use: { // 寫法3 loader配置// loader: "babel-loader",// options: {// }// }}]}
}
打包
打包
不寫配置，看打包結果（es5寫法是否可轉為es6）
打包結果：箭頭函數、let還在，說明沒有轉換為es5.
問題
- 為什么配置了babel-loader，es6仍沒有轉換為es5呢？
- 規范
- 采用何種es規范，不同年代有不同標準，目標是什么（支持ie與否）——babel不知要編譯到何種程度，于是沒有轉換。
- 解決方案：給babel指定編譯規范——
preset（可理解為集合好的編譯規范）
- 解決方案：給babel指定編譯規范——
- 項目中常用的preset是
@babel/preset-env
3 安裝preset
安裝preset，命令：npm install @babe/preset-env --save-dev
4 配置preset
配置preset
module.exports = {// loadermodule: {rules: [{// 每個對象是一個loadertest: /\.js$/,// loader: "babel-loader", // 寫法1use: {loader: 'babel-loader',options: {presets: [['@babel/preset-env',{targets: {//編譯目標browsers: [// 以瀏覽器為描述目標">1%",// 支持所有占有率>1%的瀏覽器"last 2 versions",//支持最后2個版本"not ie<=8" //不需要支持小于ie8以前的瀏覽器]}}]]}}}]}
}
5 打包
執行打包命令：webpack
打包結果：此時es6會編譯為es5，可以發現，打包文件沒有任何箭頭函數或let關鍵字，說明babel已經生效。
3.1.2 .babelrc
- 通常情況下，babel-loader配置不需要手動配置
- 很多腳手架里會用到
.babelrc
將babel-loader的配置移動到.babelrc里，寫法如下
.babelrc是json文件，需要遵循json格式。
// webpack.config.js
module.exports = {// loadermodule: {rules: [{// 每個對象是一個loadertest: /\.js$/,// loader: "babel-loader", // 寫法1use: {loader: 'babel-loader'}}]}
}
// .babelrc
{"presets": [["@babel/preset-env",{"targets": {"browsers": [">1%","last 2 versions","not ie<=8"]}}]]
}
即，將options移動到.babelrc文件里。
3.2 代碼規范——eslint
- eslint官網：https://eslint.org/
- eslint的本質
- eslint自身不做任何代碼規范檢查。
- 代碼規范是根據團隊成員習慣共同達成的規范，每個團隊的規范不盡相同，因此eslint無法做規范。
- 可以使用第三方規范，插入eslint即可使用。
3.2.1 版本差異
- webpack3-4，使用eslint-loader（5后廢棄）
- webpack5，使用eslint-webpack-plugin
以前使用loader，現在改用插件。
配置的寫法是相似的。
3.2.2 配置
1 安裝eslint
命令：npm install eslint eslint-webpack-plugin --save-dev
需要安裝eslint和eslint-webpack-plugin
此兩個包的關系與babel-loader和@babel/core類似。
安裝失敗，提示npm error network ‘proxy‘ config is set properly. See: ‘npm help config‘，參考https://blog.csdn.net/m0_74358570/article/details/141425542
2 注冊插件
注意配置文件是node語法。
// webpack.config.js
// 1 引入插件
const eslintplugin = require("eslint-webpack-plugin");
// 2 配置插件
module.exports = {plugins: [new eslintplugin({// 插件配置})]
}3 配置插件
直接在webpack.config.js配置是可以的，但也可以像.babelrc一樣，單獨在其他文件——.eslintrc.js里配置。
// webpack.config.js
// 1 引入插件
const eslintplugin = require("eslint-webpack-plugin");
// 2 配置插件
module.exports = {plugins: [new eslintplugin()]
}
// .eslintrc.js
module.exports = {env: {browser: true,// 瀏覽器環境，可以使用window全局變量，如果是node則不能使用windowes2021: true // 項目es是2021標準},extends: [// 繼承規范],plugins: [// 使用插件作為規范],// 解析配置parserOptions: {ecmaVersion: 6, // 指定使用的es版本sourceType: "module", // 模塊化實現，默認script引入模塊（通過script標簽引入js），module：通過import引入ecmaFeature: {jsx: true, // 檢查jsx代碼}},rules: {"no-console": 0// 0/off:關閉檢查，1/warning: 警告，2/error: 錯誤（會中斷執行）}
}
4 rules——eslint檢查
- eslint檢查主要在開發模式檢查，打包不會檢查——因此將代碼用開發模式啟動。
- 命令：
webpack-dev-server - 效果：rules屬性的no-console為0，項目啟動不會報錯（a.js中有console），為2，項目啟動會報錯。
- 報錯處理
- 執行以上命令，需要安裝
webpack-dev-server，安裝命令：npm install webpack-dev-server --save-dev - 安裝成功后，執行
webpack-dev-server，仍報錯 - 在
package.json中添加一個 script 來啟動webpack-dev-server. 執行npm run webpack-dev-server// package.json "scripts": {"webpack-dev-server": "webpack-dev-server" } - 執行過程中提示安裝webpack-cli
- 注意需要升級webpack版本
- 再次執行
npm run webpack-dev-server，仍有問題，不管了
- 執行以上命令，需要安裝
3.2.3 規范
1 extends繼承規范
- 如果一個個寫rules很麻煩，那么可以繼承現成的規范，如
eslint-config-standard，eslint-config-airbnb，可以安裝并繼承規范。
以eslint-config-standard為例。
.eslintrc.js內定義的規范優先級要高于繼承的eslint-config-standard等規范。
多數項目會繼承eslint-config-standard規范。
1 安裝命令：npm install eslint-config-standard
安裝失敗，版本沖突疑似
2 繼承規范
// .eslintrc.js
// 修改了extends屬性
module.exports = {env: {browser: true,// 瀏覽器環境，可以使用window全局變量，如果是node則不能使用windowes2021: true // 項目es是2021標準},extends: [// 繼承規范"standard"],plugins: [// 使用插件作為規范],// 解析配置parserOptions: {ecmaVersion: 6, // 指定使用的es版本sourceType: "module", // 模塊化實現，默認script引入模塊（通過script標簽引入js），module：通過import引入ecmaFeature: {jsx: true, // 檢查jsx代碼}},rules: {"no-console": 0// 0/off:關閉檢查，1/warning: 警告，2/error: 錯誤（會中斷執行）}
}
2 plugins插件
- plugins，支持特殊語法。
- 提供額外的rules
- 提供一套現成的規范
.vue文件，比如要求template內所有的內容需要寫在一個div標簽內，這樣的風格eslint本身的rules沒有，那么就需要用到plugins
vue項目會安裝eslint-plugin-vue，并且會定義vue特殊的rules，以及繼承vue規范。
以eslint-plugin-vue為例
1 安裝eslint-plugin-vue，命令: npm install eslint-plugin-vue --save-dev
2 注冊插件
// .eslintrc.js
// 修改了extends屬性
module.exports = {env: {browser: true,// 瀏覽器環境，可以使用window全局變量，如果是node則不能使用windowes2021: true // 項目es是2021標準},extends: [// 繼承規范"standard","plugin:vue/strongly-recommended" //繼承vue的規范],plugins: [// 使用插件作為規范"vue"// 注冊插件],// 解析配置parserOptions: {ecmaVersion: 6, // 指定使用的es版本sourceType: "module", // 模塊化實現，默認script引入模塊（通過script標簽引入js），module：通過import引入ecmaFeature: {jsx: true, // 檢查jsx代碼}},rules: {"no-console": 0// 0/off:關閉檢查，1/warning: 警告，2/error: 錯誤（會中斷執行）}
}
p3代碼分割和打包似乎沒講.
![[2025CVPR]AdcSR：一種高效實世界圖像超分辨率的對抗擴散壓縮方法](http://pic.xiahunao.cn/[2025CVPR]AdcSR：一種高效實世界圖像超分辨率的對抗擴散壓縮方法)
