美文网首页
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 内置插件

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