【webpack】webpack一些常用配置

最新推荐文章于 2024-05-30 13:59:14 发布

Liu-yasai

最新推荐文章于 2024-05-30 13:59:14 发布

阅读量475

点赞数

分类专栏： webpack 文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/weixin_46389390/article/details/128247859

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

【webpack】webpack一些常用配置

打包不生成.map文件

打包产生.map文件是由于配置了sourcemap选项生成的，
打包后的文件不容易找到出bug对应的源代码的位置，sourcemap就是来帮我们解决这个问题的，
有了map文件就可以像未压缩的文件代码一样，准确的输出是哪一行哪一列有错。

但是打包后的.map文件非常占用空间，在项目上线后没必要打包生成.map文件。

如果不想生成.map文件，只需在webpack.config.js账中做一下配置，将const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== ‘false’;
替换为const shouldUseSourceMap = false;

// const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
const shouldUseSourceMap = false;

打包自动在文件后添加随机数

在上传项目时，有时候会因为缓存问题导致项目没有更新，此时我们需要在script标签引入的js文件后添加随机数来清理缓存
在这里插入图片描述
在webpack配置文件中添加 hash:true, 即可自动添加随机数

 plugins: [
      // Generates an `index.html` file with the <script> injected.
      new HtmlWebpackPlugin(
        Object.assign(
          {},
          {
            inject: true,
            template: paths.appHtml,
            hash:true,  //打包自动添加随机数
          },
          isEnvProduction
            ? {
                minify: {
                  removeComments: true,
                  collapseWhitespace: true,
                  removeRedundantAttributes: true,
                  useShortDoctype: true,
                  removeEmptyAttributes: true,
                  removeStyleLinkTypeAttributes: true,
                  keepClosingSlash: true,
                  minifyJS: true,
                  minifyCSS: true,
                  minifyURLs: true,
                },
              }
            : undefined
        )
      ),