webpack 相关整理

webpack 的必要性

webpack 是一个Assets的打包工具。

通过webpack可以把css，js，json，raw text 等等依赖打包到一个bundle的js中，在html页面中，只需要引用这么一个bundle即可。

webpack的类似工具已经太多，早在Rails红极一时的年代，Sproket就已经具备了很强大的打包功能。

那么使用webpack到底有没有必要呢？ 那当然是有必要的，因为很多时候你接手的项目已经倒入了webpack，这个时候，你也只有硬着头皮上了。

webpack 的配置

一般在项目root下面直接运行不带参数的webpack命令，webpack会自动寻找该目录下的config文件。 随便找了个网上的最简单的例子来看一下。

module.exports = {
  context: __dirname + '/src',

  entry: {
    js: "./js/entry.js"
  },

  output: {
    path: __dirname + '/dist',
    filename: "./js/app.js"
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      }
    ]
  }
}

entry

总的文件js的入口。在这个文件里可以引用下面通过module loader 导入进来的模块。
比如

var my_style= require("mystyle.css")
var my_data = require("mydata.json")

output

这个就是最后生成的bundle文件。

modules loaders

通过loaders可以把任何assets通过上面类似require('xxx')的形式导入到entry文件中。

loaders 是一个数组，可以针对任何文件形式进行不同处理。比如上面的例子。

{
	test: /\.js$/, // 所有符合条件的js文件
	exclude: /node_modules/, // node_modules里面的js文件除外
	loader: 'babel-loader', // 使用babel-loader处理这些js文件
	query: {
		presets: ['es2015'] // 处理时候带参数es2015，告诉babel使用es2015的preset进行编译。
	}
}

loaders 可以拼接在一起形成pipeline。 比如

module: {
 loaders: [{
  test: /\.css$/,
  loader: ‘style!css’ <--(style-loader!css-loader的省略表现)
 }]

Plugin

除了module loader，我们还可以添加各种plugin。
plugin用于在我们生成bundle之后来对生成的bundle进行处理。比如下面的例子，我们对生成的bundle文件使用Uglify进行压缩。

//↑↑↑↑省略
 output: {
    path: __dirname + '/dist',
    filename: "./js/app.js"
  },

  //↓↓↓↓追加
  plugins: [
    new webpack.optimize.UglifyJsPlugin()
  ],

//↓↓↓↓省略

除此之外我们还可以引入html模版的plugin，最后生成我们想要的index.html。所有的module loaders和 plugins都可以在文档的List的相关页面里找到。

webpack-dev server

webpack自带dev server。我们也可以在配置文件中进行相关配置。

devServer: {
   contentBase: 'dist',
   port: 3000
 },

最后

使用webpack使得任何assets都可以模块化，管理和打包发布变得十分方便。但是有些时候，有些内容需要频繁变更的模块，就不太适合放进去打包到一起了。也许使用经验较深的enginner知道该怎么做吧。