webpack+vite前端构建工具 - 3webpack处理js
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代码分割和打包似乎没讲.