webpack打包配置（Webpack 配置）

本文目录

• Webpack 配置
• create-react-app craco进行webpack配置(修改篇)
• 打包优化去掉console.log，webpack.js配置排除打包瘦身
• webpack打包Js文件
• WebPack打包React项目, 减小打包后生成的js文件.

Webpack 配置

***隐藏网址***
***隐藏网址***
***隐藏网址***

static 设置的是静态资源目录的位置，不是打包生成的文件的存放位置，devServer 打包生成的文件存放在内存中，不存放到硬盘目录。

static.publicPath 设置的是访问静态资源的路径，不是访问打包生成的资源的路径，打包生成的资源路径通过 output.publicPath 访问，静态资源路径访问的是直接存放在静态目录中的静态资源。

配置文件

initial chunk 的文件名

占位符：

non-initial chunk 的文件名，占位符参考 output.filename

设置为 true ，每次打包之前清理 output.path 目录中的所有内容，可以替代 CleanWebpackPlugin 插件。

定义资源存放的位置，例如根据以上的配置文件打包之后生成如下文件：

将 1 2 3 生成的资源都存放到 output.path 目录， dist/app.bundle.js dist/css/app.min.css dist/images/1.jpg

部署的时候，将该目录下的内容复制到服务器对应的目录即可。

定义资源访问的路径

资源访问路径 = output.publicPath + 资源名称

output.publicPath 可以是绝对路径、相对于服务的路径、相对于页面的路径。 不管是哪种路径，都要以 / 结尾

HtmlWebpackPlugin 生成的 index.html 文件：

MiniCssExtractPlugin 生成的 css 文件：

HtmlWebpackPlugin 生成的 index.html 文件：

MiniCssExtractPlugin 生成的 css 文件：

HtmlWebpackPlugin 生成的 index.html 文件：

MiniCssExtractPlugin 生成的 css 文件：

不管通过哪种路径设置 output.publicPath ，都只是影响 HtmlWebpackPlugin 和 MiniCssExtractPlugin 生成的文件中引用其他资源的路径。具体能不能根据资源路径访问到相应的资源，还得正确的部署 output.path 目录到服务器。

***隐藏网址***

如果你的页面希望在其他不同路径中找到资源文件，则可以通过 devServer 配置中的 devMiddleware.publicPath 选项进行修改。

在生产模式下，推荐将 output.publicPath 设置为绝对路径，然后将 output.path 目录部署与绝对路径对应的服务器中。

配置文件

module.rules 是匹配规则数组，数组中的每一项为一条匹配规则，以下称为 rule。每条 rule 包括匹配条件和匹配结果。

对于依赖图中的每个模块路径，都按照 module.rules 中的 rule 依次进行匹配。如果模块路径满足某个 rule 的匹配条件，则对该模块应用该 rule 的 匹配结果中指定的 loader 进行预处理。? 如果模块路径满足多个 rule 的匹配条件 ?

匹配条件包括 test include exclude 选项，每个选项为一个匹配条件，选项的值可以是：

如果某个 rule 同时有多个匹配条件选项，则模块路径必须同时满足所有的匹配条件，才会对模块应用匹配结果。test 和 include 具有相同的作用，都是必须匹配选项。exclude 是必不匹配选项（优先于 test 和 include）。

最佳实践：

以上配置文件的第二条 rule，如果某个模块不在 ./src/node_modules/ 和 ./src/libs/ 目录下，并且在 ./src/ 目录下，并且模块名以 .js 结尾，则满足该条 rule 的匹配条件。

package.json

webpack.common.js

webpack.prod.js

webpack.dev.js

create-react-app craco进行webpack配置(修改篇)

npm install compression-webpack-plugin --save //打包build生成gizp压缩文件

compression-webpack-plugin 打包的文件生成 .gz后缀的文件需要服务器配置支持。

npm install uglifyjs-webpack-plugin@1 --save-dev
（ 必须为1.0版本，否则打包报错）

npm i @babel/plugin-proposal-decorators --save -dev

npm i webpack-bundle-analyzer --save -dev

：生产版本关闭此项

npm install simple-progress-webpack-plugin --save -dev

以上配置是我项目中使用，可以按需使用。

打包优化去掉console.log，webpack.js配置排除打包瘦身

在vue.config中，配置：

chainWebpack(config) {

    config.optimization.minimizer(’terser’).tap((args) =》 {

      args.terserOptions.compress.drop_console = true

      return args

    })

}
通过配置vue-cli把一些平常不需要用的包排除在打包文件之外。

例如:让 webpack 不打包 vue xlsx 和 element 

先找到 vue.config.js ， 添加 externals 项，具体如下：

再次运行打包，我们会发现包的大小已经大幅减小： 三个包已经不在打包的目标文件中了。

 但是我们还要使用这些包，可以通过CDN访问

在开发环境时，文件资源还是可以从本地node_modules中取出，而只有项目上线了，才需要去使用外部资源。此时我们可以使用 环境变量 来进行区分。具体如下：

在 vue.config.js 文件中：

let externals = {}

let cdn = { css: }

const isProduction = process.env.NODE_ENV === ’production’ // 判断是否是生产环境

if (isProduction) {

  externals = {

      /**

      * externals 对象属性解析：

      * ’包名’ : ’在项目中引入的名字’

    */

      ’vue’: ’Vue’,

      ’element-ui’: ’ELEMENT’,

      ’xlsx’: ’XLSX’

  }

  cdn = {

    css: [

***隐藏网址***

    ],

    js: [

      // vue must at first!

***隐藏网址***

***隐藏网址***

***隐藏网址***

    ]

  }

}

之后通过 html-webpack-plugin注入到 index.html之中:

chainWebpack(config) {

  config.plugin(’preload’).tap(() =》 [

    {

      rel: ’preload’,

      fileBlacklist: ,

      include: ’initial’

    }

  ])

  // 注入cdn变量 (打包时会执行)

  config.plugin(’html’).tap(args =》 {

    args.cdn = cdn // 配置cdn给插件

    return args

  })

  // 省略其他...

}

找到 public/index.html 通过配置CDN Config 依次注入 css 和 js。

修改head的内容如下：

《!-- 引入样式 --》

      《% for(var css of htmlWebpackPlugin.options.cdn.css) { %》

        《link rel="stylesheet" href="《%=css%》"》

        《% } %》

    《!-- 引入JS --》

    《% for(var js of htmlWebpackPlugin.options.cdn.js) { %》

      《script src="《%=js%》"》《/script》

    《% } %》

webpack打包Js文件

a .
注意点:index.js就是需要打包的文件打包之后的文件会放到dist目录中, 名称叫做main.js
b .
这句指令的含义是: 利用webpack将index.js和它依赖的模块打包到一个文件中
其实在webpack指令中除了可以通过命令行的方式告诉webpack需要打包哪个文件以外,
还可以通过配置文件的方式告诉webpack需要打包哪个文件

这句指令的含义是将webpack将index.js和他依赖的模块打包到一个文件中
其实webpack打包指令除了可以通知要打包哪些文件，还可以通过配置
2.2webpack常见配置

刚才是输入npx webpack index.js 那么现在就可以输入npx webpack了
如果想要使用其他指令，可以直接修改的 package.json 的scirpts

以后再打包的时候，就可以直接使用npm run test了；

当然，还可以看下devtool的取值，他生成的sourcemap映射表，对打包后的包的大小和打包速度有很大影响

WebPack打包React项目, 减小打包后生成的js文件.

***隐藏网址***
```

这里分别把 使用的 react , react-dom , jquery , react-router , 第三方库提了出来单独生成文件vendor.js

首先安装依赖: extract-text-webpack-plugin ,

之后在webpack中进行配置

**注意: ** 例子中配置中 {publicPath: ’./’} 不是必填项, 我这里是为了解决背景图片打包或路径不正确的问题, 具体请查看