webpack常用plugins

最新推荐文章于 2024-07-13 09:15:00 发布

Rose-chen

最新推荐文章于 2024-07-13 09:15:00 发布

阅读量778

点赞数

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

本文链接：https://blog.csdn.net/ch071714301/article/details/102702660

版权

web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

最近项目中webpack用到以下几个常用的plugins，记录一下

CopyWebpackPlugin

用途：将单个文件或整个目录复制到构建目录。

examples：将static文件夹下面所有的文件复制到构建目录

new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])

HtmlWebpackPlugin

用途：该插件将为你生成一个 HTML5 文件，其中包括使用 script 标签的 body 中的所有 webpack 包

examples：

new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency'
    }),

ExtractTextWebpackPlugin

用途：它会将所有的入口 chunk(entry chunks)中引用的*.css，移动到独立分离的 CSS 文件

examples：

new ExtractTextPlugin({
   filename: utils.assetsPath('css/[name].[contenthash].css'),
   allChunks: true,
}),

OptimizeCSSPlugin

用途：它会将在Webpack构建过程中搜索CSS资源，并优化/最小化CSS文件

examples：

new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),

UglifyJsPlugin

用途：它会将在Webpack构建过程中优化/最小化JS文件

examples：

new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),

FriendlyErrorsPlugin

用途：识别某些类别的webpack错误，并清理，聚合和优先级，以提供更好的开发人员体验。

examples：

new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors
          ? utils.createNotifierCallback()
          : undefined
      })

待更新~