美文网首页
webpack 内置插件

webpack 内置插件

作者: hi_rao77 | 来源:发表于2017-06-15 14:49 被阅读164次
一. webpack.optimize.UglifyJsPlugin

用途:压缩代码

1. 自动方式:

在命令行中指定 --optimize-minimiz。或者运行webpack -p (也可以运行 webpack --optimize-minimize --define process.env.NODE_ENV="'production'",他们是等效的,会打包注释、空格))

2. plugins中配置
new webpack.optimize.UglifyJsPlugin({
  sourceMap:  //是否生成map文件,default true
  compress: {
    warnings: false,//压缩警告
    drop_debugger: true, //输出文件不debugger
    drop_console: true, //输出文件不console
  }
}),

参考

2. webpack.optimize.CommonsChunkPlugin

用途:提取第三方库

entry: {
  babelpolyfill: "babel-polyfill",
  main: "./src/main.js",
  vendors: ['vue', 'vue-router']// 可省略
},
//或
entry: {
  main: ["babel-polyfill", "./src/main.js"],
  vendors: ['vue', 'vue-router']
},
//第一种方式将输出3个js文件,第二种方式只会输出两个,main.js 和 vendors.js
new webpack.optimize.CommonsChunkPlugin({
  name: "vendors",//(the commons chunk name)公共代码块js文件名
  filename: "vendors.js",// (the filename of the commons chunk)可忽略
  minChunks: // 
  chunks: // 
}),

更多👇👇👇
可参考的例子
CommonsChunkPlugin提取公共代码的3种方式

3. DefinePlugin

用途:创建一个全局变量

4.

相关文章

  • webpack-plugin

    DefinePlugin 描述 DefinePlugin 是 webpack 内置的插件,可以使用 webpack...

  • webpack插件& loader篇

    插件 webpack入门中 列出了下面这些插件 本篇则对它们做一个介绍 插件分文webpack内置插件 和 要外部...

  • webpack 内置插件

    一. webpack.optimize.UglifyJsPlugin 用途:压缩代码 1. 自动方式: 在命令行中...

  • 如何写一个webpack plugin?

    webpack运行图webpack运行图 内置钩子 apply 是每个插件必备的方法,webpack会在run的时...

  • (六)插件(Plugins)

    Webpack有很多内置插件,同时也有很多第三方插件,可以让我们完成很多丰富的功能。如果我们需要在webpack中...

  • Tapable

    1. webpack的插件机制 在具体介绍webpack内置插件与钩子可视化工具之前,我们先来了解一下webpac...

  • plugins

    plugin plugin 插件可以完成更多loader不可以实现的功能。 webpack内置了很多的插件,这里我...

  • webpack压缩css和js

    压缩 CSS webpack5 貌似会内置 css 的压缩,webpack4 可以自己设置一个插件即可。 压缩 c...

  • 从0到1学习Webpack5 (二):webpack插件

    Webpack 本身内置了一些常用的插件,还可以通过 npm 安装第三方插件。我们按需安装插件,完成我们需要的功能...

  • 缓存优化

    缓存优化的基本原理 Webpack 4 内置了压缩插件 TerserWebpackPlugin,且默认开启了缓存参...

网友评论

      本文标题:webpack 内置插件

      本文链接:https://www.haomeiwen.com/subject/nxkeqxtx.html