webpack基础知识介绍

1.开发模式

开发模式顾名思义就是我们开发代码时使用的模式

webpack默认只处理js文件，对样式是没办法处理的。因此要处理css资源需要引入CSS-loader

处理CSS资源

如果要使用 css-loader，你需要安装 webpack@5

首先，你需要先安装 css-loader：npm install --save-dev css-loader style-loader

然后把 loader 引用到你 webpack 的配置中。如下所示：

在入口（entry）main.js文件中引入css资源文件。  import  "./css/file.css";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,  //只检测以.css结尾的文件
        use: ["style-loader", "css-loader"],   //use的执行顺序，从右到左，从下到上 先执行css-loader 再执行style-loader
                                                //css-loader:将css资源编译成commonjs的模块到js中， style-loader 将js中css通过创建style标签添加html文件中生效
      },
    ],
  },
};

然后运行 webpack。

如果由于某种原因你需要将 CSS 提取为一个文件（即不要将 CSS 存储在 JS 模块中），你可能想要查看 推荐示例。

处理less资源

首先，你需要先安装 less 和 less-loader： $ npm install less less-loader --save-dev

在入口（entry）main.js文件中引入css资源文件。  import  "./less/file.less";

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        // loader：'xxx' 只能使用1个loader
        use: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
};

处理Sass和SCSS资源

npm install sass-loader sass  --save-dev
在入口（entry）main.js文件中引入css资源文件。  import  "./scss/file.scss";

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/,
        // loader：'xxx' 只能使用1个loader
        use: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'sass-loader',  //将sass编译成CSS文件

        ],
      },
    ],
  },
};

处理图片资源  （本身就会自动打包，但是优化可以处理的更好）

  test:/\.(png|jpe?g|gif|webp|svg)$/,
  type:"asset",
  parser:{
  dataUrlConditon:{
maxSize:10 *1024, //10KB
   }
}
generator:{
  //输出图片名称
 filename:'static/images/[hash][ext][query]',   //hash 是根据文件内容生成hash值，内容是唯一的 [hash:10] hash值取前10位  ext是文件扩展名，你之前是什么的，之后还是什么，query是携带一些参数

}
}

修改输出文件目录

output:{

//所有文件的输出路径
//_dirname nodejs的变量，代表当前文件的文件夹目录
path:path.resolve(_dirname,'dist') //绝对路径
//入口文件打包输出文件名
filename:'static/js/main.js',
 }

自动清空上次打包内容

output:{

//所有文件的输出路径
//_dirname nodejs的变量，代表当前文件的文件夹目录
path:path.resolve(_dirname,'dist') //绝对路径
//入口文件打包输出文件名
filename:'static/js/main.js',
clear:true,  //自动清空上次打包的内容，原理：在打包前，将整个path目录内容清空，再进行打包
 }

处理字体图标资源

 阿里巴巴矢量图标库https://www.iconfont.cn/search/index

处理其他资源

开发中可能还存在一些其他资源，如音视频等。

处理js资源

原因是webpack对js处理是有限的，只能编译js中ES模块化语法，不能编译其他语法，导致js不能再IE等浏览器运行，所以我们希望左一些兼容性处理

。其次开发中，团队对代码有严格要求的，我们不能由肉眼取检测代码格式，需要使用专业的工具来检测。

针对js兼容性处理，我们使用Babel来完成。

针对代码格式，我们使用EsLint来完成。

我们先完成EsLint，检测代码格式无误后，在由Babel做代码兼容性处理。

Eslint

在webpack 4 的时候是loader ，在webpack5的时候是一个插件。

Eslint的官方文档地址 https://eslint.bootcss.com/ ，可以检查配置选项。

可组装的Javascript 和jsx检查工具

这句话意思就是：它是用来检测js和jsx语法的工具，可以配置各项功能。

我们使用Eslint，关键是写Eslint配置文件，里面写上各种rules规则，将来运行Eslint时就会以写的规则对代码进行检查

 Eslint 在rules中写规则， 或者继承extends现有的规则

现在以下较为有名的规则：

Eslint 官方的规则 eslint:recommendded

Vue Cli 官方的规则  plugin：vue/essential 

React Cli 官方的规则 react-app

off或0 -关闭规则

warn 或 1 开启规则，使用警告级别的错误 warn（不会导致程序退出）

error 或 2 开启规则，使用错误级别的错误，error（当被触发的时候，程序会退出）

首先，需要安装 eslint-webpack-plugin：npm install eslint-webpack-plugin eslint --save-dev

然后把插件添加到你的 webpack 配置。例如：

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  // 所有的插件都是构造函数，需要用new调用
  plugins: [new ESLintPlugin({
       //检测哪些文件
     context:path.resolve(_dirname,'src')

})],
  // 在options 中可以传入eslint参数
 

};

然后创建一个文件，文件名 .eslintrc.js

//列如react项目中，我们可以这样写配置
module.exports ={
extends:['react-app'],
env:{
node:true,//启动node中全局变量
browser:true //启动浏览器中全局变量
},
parserOptions:{
ecmaVersion:6, //es6
sourceType:"module " //es module

},

rules:{

//rules参考eslint官网
//我们的规则会覆盖掉react-app的规则
//所以想要修改规则直接改就是了
 eqeqeq:['warn','smart'],
"no-var":2 //不能使用var 定义变量
}}

在根目录创建.eslintignore

作用是让编译器不检查 dist目录

Babel

javascript编译器

主要用于将ES6语法编写的代码转换为向后兼容的JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中

具体配置

我们以babel.config.js 配置文件为例

module.exports = {
//预设
presets:[],
}

1.presets 预设

简单理解：就是一组Babel插件，扩展Babel功能

@babel/preset-env 一个智能预设，允许您使用最新的JavaScript

@babel/preset-react 一个用来编译React jsx语法的预设

@babel/preset-typescript 一个用来编译Typescript语法的预设

安装  npm install -D babel-loader @babel/core @babel/preset-env

在webpack.config.js文件中加入

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /node_modules/, //排除node——modules中的js文件（这些文件不处理）

      loader: 'babel-loader',

 } ] }

然后再根目录建立一个文件夹  babel.config.js

module.exports={
//智能预设，能够编译ES语法
presets:[@babel/present-env]

}

处理html资源

开发服务器&自动化

每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化

会创建一个开发服务器，监视src下面的文件，一旦发生变化会自动的 重新打包

npm i webpack-dev-server -D

在webpack.config.js的plugins:[]中加入

//开发服务器：不会输入资源，在内存中编译打包的，所以dist文件中没有任何东西

devServer：{
host:'localhost', //启动服务器域名
port:'3000', //启动服务器端口号
open:true //是否自动打开浏览器
}

启动的指令会变化 ，变成npx webpack serve

生产模式介绍
生产模式是开发完成代码后，我们需要得到代码将来部署上线。
这个模式下我们主要对代码进行优化，让其运行性能更好。
生产模式准备
我们分别准备两个配置文件来放不同的配置
准备一个文件夹config，放不同的配置文件，将根目录的下的webpack.config.js移入其中，将其改名为，webpack.dev.js作为开发模式下的webpack配置。
然后再创建一个webpack.prod.js作为生产模式下的webpack配置文件。

放到config目标下，的webpack配置文件中的入口文件路径是不需要修改的。因为实际运行代码还是在外面运行的，
但是，output中的绝对路径是需要修改的 path中 ../要回退一层，但是开发模式中path不需要输出，因为是在内存中编译，path可以指定为path：undefined
绝对路径都是需要回退一层目录 ../