关于webpack配置的一些简单说明

最新推荐文章于 2024-09-12 15:51:47 发布

原创最新推荐文章于 2024-09-12 15:51:47 发布 · 444 阅读

0 ·

CC 4.0 BY-SA版权

webpack 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了Webpack配置中的重要参数，包括exclude/include用于优化babel-loader处理，importLoaders设定css-loader后续加载器数量，limit/name配置图片打包策略，extensions/alias简化导入路径，splitChunks实现代码分割，html-webpack-plugin生成并注入HTML模板，以及uglifyjs-webpack-plugin对ES6语法的压缩。了解这些将有助于提升Webpack构建效率和项目性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.exclude/include

{
    test:/\.(js|jsx)$/,
    exclude:/node_modules/,
    use: {
       loader: "babel-loader"
    }
},
{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev- 
             server/client')]
},

exclude:表示哪些目录中的 .js 文件需要进行 babel-loader

include:表示哪些目录中的 .js 文件不需要进行 babel-loader

有些引入的第三方库，已经是js语法了，浏览器可以被识别了，不需要再被babel打包了，如果不写exclude，那么引入的第三方库还是需要被babel打包，打包的时间就变长了。

2. importLoaders

{
    test: /\.scss$/, use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          modules: true,
          importLoaders: 1
        }
      },
      'sass-loader'
    ]
},

importLoaders：表示css-loader后还需要几个loader

3.limit /name

    {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: {
            loader: 'url-loader',
            options: {
            limit: 10000,
            name: "font/[name].[ext]",
            }
        }
    }

limit 字段代表图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会自动转成 base64 码引用。上例中大于10000字节的图片正常打包，小于10000字节的图片以 base64 的方式引用。

name字段来指定图片打包的目录与文件名

4.extensions/alias

  resolve: {
    extensions: [".js", ".jsx", ".css", ".scss"],
    alias: {
      'react$' : '/path/to/react.min.js'
    }
  },

extensions:在导入语句没带文件后缀时，webpack会自动带上后缀去尝试访问文件是否存在。

alias:通过别名来把原来导入路径映射成一个新的导入路径

5.splitChunks

splitChunks: {
   chunks: 'all',//必须三选一： "initial" | "all"(推荐) | "async" (默认就是async)
   minSize: 30000,//合并前模块文件的体积,形成一个新代码块最小的体积
   minChunks: 1,//最少被引用次数,在分割之前，这个代码块最小应该被引用的次数（译注：保证代码块复用性，默认配置的策略是不需要多次引用也可以被分割）
   maxAsyncRequests: 5, // 最大异步请求数， 默认5
   maxInitialRequests : 3, // 最大初始化请求书，默认3
   automaticNameDelimiter: '~',// 打包分隔符
   cacheGroups: {
       common: {
           name: 'common',
           test: /node_modules/,
           chunks: 'initial',
           priority: -10,//优先级更高
           enforce: true
       },
       styles: {
           name: 'styles',
           test: /(\.scss|\.css)$/,
           chunks: 'all',
           enforce: true,
        }
   }
}

chunks:默认只作用于异步模块，为`all`时对所有模块生效,`initial`对同步模块有效

cacheGroups:设置缓存的chunk

priority: -10,//优先级更高

6.html-webpack-plugin

const HtmlWebpackPlugin = require("html-webpack-plugin");
plugins: [
    new HTMLPlugin({
      template: `${SRC_DIR}/index.html`,
    })
],

我们在我们的webpack里面常会引入这个插件，他的作用就是我们每次修改js,css文件后，他们就会渲染到我们的index.html里面去。

title：生成的HTML模板的title，如果模板中有设置title的名字，则会忽略这里的设置

filename：生成的模板文件的名字

template：模板来源文件（html文件）

inject：引入模板的注入位置，取值有true/false/body/head

true：默认值，script标签位于html文件的body底部

body:script标签位于html文件的body底部

head:script标签位于html文件的head中

false:不插入生成的js文件，这个几乎不会用到的

favicon：指定页面图标。

7.uglifyjs-webpack-plugin

压缩es6语法，纯属个人好奇，才写下来，不再深究了，可以自己去百度吧