webpack超详细，超规范，超炫酷

webpack使用原因

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的 JavaScript 代码和一大堆依赖包。为 了简化开发的复杂度，前端社区涌现出了很多好的实践方法

1、模块化 ，让我们可以把复杂的程序细化为小的文件 ;

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让 浏览器识别, 而手动处理又是非常繁琐的，这就为 WebPack 类的工具的出现提供了需求。

什么是webpack?

WebPack 可以看做是模块打包机，分析你的项目，可以看做是给各个模块打包压缩的， 并将其转换和打包为合适的格式供浏览器 使用

webpack使用方式

1、命令式

1、运行cmd命令

npm init  //初始化项目

  2、首先把项目初始化一遍，方便之后的配置

npm i webpack webpack-cli -D//安装webpack依赖

这里有个点需要注意一下 ，这个webpack只能是安装在项目中，不可安装在全局的环境变量中，

3、打包文件直接使用下面的命令

webpack ./src/app.js//这里的文件路径可以替换为自己真实的路径

4、如果上面的命令使用不了的话，还有备选方案

npx webpack ./src/app.js//这里和上面同理

2、接着就是配置式的方式

上面命令式的使用 webpack 需要手动的输入参数来告知 webpack 的打包环境，需要打包的文件等，这 样每次打包都要输入很长的命令，非常麻烦。在项目根目录新增一个 webpack.config.js

module.exports = {
entry: './src/app.js', // 需要打包的文件
mode: 'development' // 打包环境
}
//这个是写在webpack.config.js里面的

npx webpack --config ./webpack.config.js//这里运行的命令可以换成这个

3、基本配置

entry ： 表示 webpack 的入口，指定打包的文件，可以一个或多个。

output ： 表示输出文件的路径和文件名。

mode ： 表示打包环境，可设置 production（生产环境）  或 development（开发模式）  值。

const path = require('path')
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
clean: true
},
mode: 'development'
}

4、Loader部分

webpack 的 Loader 主要用于对模块的转换，也就是对文件的转化，如将 Less 、 Sass 处理成 CSS ，将图 片处理成 data URL 等

首先，是loader在配置中的格式

module.exports = {
...
module: {
rules: []
}
}

4.1 处理 CSS：

需要借助 Loader 或者 Plugins ，处理 CSS 需要用到 css-loader 和 style-loader ，不管是 Loader 还是 Plugins 都是 JS 模块，所以需要安装

这里安装的命令是处理css的依赖

pnpm i css-loader style-loader -D

下面是配置的中的代码

const path = require('path')
module.exports = {
entry: './src/app.js',//这里是需要打包的文件
output: {
path: path.resolve(__dirname, 'dist'),//这里是打包的文件名
filename: 'main.js',打包的文件名是，可修改
},
mode: 'production',//开发者模式
module: {
rules: [
// 新增的loader
{
test: /\.css$/,//这里是用了正则表达式来匹配后缀为css的文件
use: ['style-loader', 'css-loader'],//style-loader设置css文件, css-loader解析了css文件
},
],
},
}

4.2处理 Sass、Less

1、这里是安装的依赖

pnpm i less less-loader sass sass-loader -D

2、这里是在webpack.config.js里面新增配置

      //这里是处理less配置
       {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
       //这里是处理sass和scss的配置
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },

4.3处理图片

1、这里是在webpack.config.js里面新增配置

{
test: /\.(png|jpe?g|gif|svg|webp)$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 200 * 1024
}
}
}

4.4处理字体图标

1、这里是在webpack.config.js里面新增配置

{
test: /\.(ttf|woff|woff2)$/,
type: 'asset/resource',
generator: {
filename: 'static/font/[hash][ext][query]'
}
}

4.5处理 CSS 兼容性

1、安装所需的依赖

pnpm i postcss-loader postcss postcss-preset-env -D

2、在配置文件中增加配置

{
"name": "webpack_demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --config ./webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
},
"browserslist": ["ie >= 7"]
}

4.5处理 js 兼容性

1、安装所需依赖

pnpm i babel-loader @babel/core @babel/preset-env -D

2、新增配置

{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader']
}

5、Plugin

webpack 的插件主要在 plugins 字段上，是个数组，也就是可以使用多个插件，每个插件在使用的时候都必须传入一个 new 实例

5.1自动引入JS 和 CSS：

引入依赖

pnpm i html-webpack-plugin -D

修改配置项

// webpack.config.js
 
module.exports = {
  entry: {
    app: './src/index.js',
    styles: './src/styles.css',
  },
  //其他配置项
};

6、devserver

devserver 可以在本地启动一个服务，使我们可以使用 http 协议去访问 index.html ，并且当修改码

时，能够监听当前项目的文件变动从而实现自动打包，而不用每次修改后都要手动打包：

devServer{
    host:"localhost",
    open:true,//是否自动打开
    port:3000//端口
}

上面的配置加到你的webpack配置就可以实现自动打包了，同时webpack打包也需要一个关键的参数才能调用这个参数就是serve，这个也是必须安装的依赖，这里是用pnpm安装的，这里可以更换其他的包管理工具，但记住你的项目中只能用一种包管理工具，如果混用的话，最后这个错误会导致项目中重构

pnpm i webpack-dev-server -D

7、开发环境和生产环境

webpack 配置是有 development 和 production 区分的，在开发环境下，通过 devserver 启动，就不会生成 dist 文件夹，而生产模式下又恰恰需要，所以我们就要在webpack配置中去配置

config.mode=process.env.NODE.ENV
if(config.mode==="development"){
config.devServer={
host:"localhost",
open:"true",
port:3000

webpack的优化

1、OneOf

oneOf 的作用是可以减少匹配 loader 的时间，因为使用了 OneOf ，当匹配到某一个规则时，只使用第一个

// webpack.config.js
 
module.exports = {
  module: {
    rules: [
      {
        oneOf: [
          {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
          },
          {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader'],
          },
          //OneOf配置内的其他规则
        ],
      },
    ],
  },
};

2、include/Exclude

Include/Exclude 的作用就顾名思义了，可以指定处理文件时，只包含哪些文件或者排除哪些文件，两者不能同时使用。

// webpack.config.js
 
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      //具有包含和排除配置的其他规则
    ],
  },
};

3、SourceMap

sourcemap 可以在打包后增强代码调试，因为打包后的代码是压缩过的，当代码报错时就会提示错误的位置。sourcemap 会影响打包的速度

// webpack.config.js
 
module.exports = {
  devtool: 'source-map',
  //其他配置项
};

4、Babel缓存

Babel 缓存同样可以提升代码打包速度， Babel 的缓存可以在第一次打包时将转换过的代码缓存起来，下次再进行打包时就可以避免部分代码的再次转换，从而提升打包速度

// webpack.config.js
 
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
          },
        },
      },
      //具有缓存配置的其他规则
    ],
  },
};

5、优化构建结果

借助插件 webpack-bundle-analyzer 我们可以直观的看到打包结果中，文件的体积大小、各模块依赖关系、文件是够重复等问题，极大的方便我们在进行项目优化的时候，进行问题诊断

所以就要下依赖包了

pnpm i -D webpack-bundle-analyzer

修改配置项

const BundleAnalyzerPlugin = require('webpack-bundleanalyzer').BundleAnalyzerPlugin
const config = {
// ...
plugins:[
// ...
// 配置插件
new BundleAnalyzerPlugin({
// analyzerMode: 'disabled', // 不启动展示打包报告的http服务器
// generateStatsFile: true, // 是否生成stats.json文件
})
],
};

总结

通过上述内容，你可以更全面地了解到 Webpack 在实际项目中的应用。它可以帮助你完成快速搭建本地开发环境、优化生产环境构建等任务、以及上面提到的注意点。希望这些信息能够帮助到你，提高项目的开发效率和性能。