webpack的各个扩展

webpack的各个扩展

务必先看的内容
以下的博客内容真不是直接就能看懂的，因为基本只有代码和用处，更详细的描述我主推看building-with-webpack这个网站，下面的内容只是我看前半部分做的笔记，后面的就没有做了，看完后对于webpack的理解会加深很多，特别是基于webpack做的chunk处理，css分离处理，依赖模块与主体js代码的分离处理，一步步教你如何使得打包代码的文件结构分得最细致且有助于浏览器的缓存处理，不过这个有所欠缺的是对于webpack搭配react的使用，webpack-dev-server的部分坑爹的地方也没详述，不过个人认为写react时需要用到webpack还是使用yeoman等自动话构建开发环境的方法会比较方便，webpack的其余内容只需要能看懂，并知道这些代码在起那些作用就好。
ps:(这个网站是全英的哦，也许需要科学上网，建议分2天左右看完吧，一直看也吃不消)

plugin:

html-webpack-plugin ：建立一个html模板，自动插入打包的js

//...
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
//...
plugins:[
    new HtmlWebpackPlugin({ title: 'Webpack demo' })
]

favicons-webpack-plugin： 处理favicons

SourceMapDevToolPlugin：

 plugins: [
    new webpack.SourceMapDevToolPlugin({
      // Match assets just like for loaders.
      test: string | RegExp | Array,
      include: string | RegExp | Array,

      // `exclude` matches file names, not package names!
      exclude: string | RegExp | Array,

      // If filename is set, output to this file.
      // See `sourceMapFileName`.
      filename: string,

      // This line is appended to the original asset processed. For
      // instance '[url]' would get replaced with an url to the
      // sourcemap.
      append: false | string,

      // See `devtoolModuleFilenameTemplate` for specifics.
      moduleFilenameTemplate: string,
      fallbackModuleFilenameTemplate: string,

      module: bool, // If false, separate sourcemaps aren't generated.
      columns: bool, // If false, column mappings are ignored.

      // Use simpler line to line mappings for the matched modules.
      lineToLine: bool | {test, include, exclude}
    }),
  ]

webpack.optimize.UglifyJsPlugin:压缩js

plugins: [
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false,

          // Drop `console` statements
          drop_console: true
        }
      })
    ]

* webpack.DefinePlugin*:在使用react中，react源码中会出现if(process.env.NODE_ENV === 'development')这样的代码，而当我们的运行环境确定后，它是应当被替换的，使用该插件把if语句进一步去掉，可以有效压缩react的体积，解析webpack-book，

提醒：使用react时也可以选择使用较小体积的preact or react-lite

plugins: [
      new webpack.DefinePlugin({
        "process.env.NODE_ENV": "production"
        })
    ]

loaders:

css： loaders: [‘style’, ‘css’]
uglify-loader: loaders: [‘uglify’]

module:

webpack-merge: 可以把分开配置的config合并，分开生产环境和调试环境

const merge = require('webpack-merge');
const commonConfig= {...};

var config;
config = merge(commonConfig, {});

webpack-validator： 验证我们的config是否正确

const validate = require('webpack-validator');
//...
module.exports = validate(config);

webpack-dev-server:自刷新页面，更改代码后可以自动刷新，最常用的module

exports.devServer = function(options) {
  return {
      //如果devserver的基本配置有问题，可以设置watchOptions去解决
     watchOptions: {
      // Delay the rebuild after the first change
      aggregateTimeout: 300,
      // Poll using interval (in ms, accepts boolean too)
      poll: 1000
    },
    devServer: {
      // Enable history API fallback so HTML5 History API based
      // routing works. This is a good default that will come
      // in handy in more complicated setups.
      historyApiFallback: true,

      // Unlike the cli flag, this doesn't set
      // HotModuleReplacementPlugin!
      hot: true,
      inline: true,

      // Display only errors to reduce the amount of output.
      stats: 'errors-only',

      // Parse host and port from env to allow customization.
      //
      // If you use Vagrant or Cloud9, set
      // host: options.host || '0.0.0.0';
      //
      // 0.0.0.0 is available to all network devices
      // unlike default `localhost`.
      host: options.host, // Defaults to `localhost`
      port: options.port // Defaults to 8080
    },
    plugins: [
      // Enable multi-pass compilation for enhanced performance
      // in larger projects. Good default.
      new webpack.HotModuleReplacementPlugin({
        multiStep: true
      })
    ]
  };
}

source-map:init时会慢，之后rebuild快

devtool: 'source-map'