Webpack 学习资料整理

本教程的目标

这是一本教你如何应用webpack到你的项目中的工具书。它包含了我们在Instagram中用到的绝大多数的内容。

我的建议：这个教程作为你第一个webpack的文档，学习完以后去看它的官方文档，了解更详细的说明。

学习的前提

你了解过类似browserify、RequireJS的东西
你知道:
- Bundle的拆分
- 异步的加载
- 打包images和css的这一类的静态资源

安装

全局安装Webpack和webpack-dev-server

$ npm i -g webpack webpack-dev-server

1. 为什么选择 webpack?

它和browserify类似 但是它可以把你的应用拆分成多个文件。如果你的单页应用里有很多页面，用户只会下载当前访问页面的代码。当他们访问应用中的其他页面时，不再需要加载与之前页面重复的通用代码。
它可以替代gulp和grunt 因为他可以构建打包css、预处理css、编译js和图片等。

它支持AMD和CommonJS，以及其他的模块系统(Angular, ES6)。如果你不太熟悉如何使用，就用CommonJS吧。

2. 对于习惯Browserify的人可以这样使用Webpack

下面的命令是等价的:

browserify main.js > bundle.js

webpack main.js bundle.js

然而，webpack要比Browserify强大。所以一般情况下你需要建立一个webpack.config.js文件来配置webpack。

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};

这就是单纯的JS，所有写这个配置文件毫无压力。

3. 如何调用webpack

选择一个目录下有webpack.config.js文件的文件夹，然后运行下面的命令:

webpack 开发环境下编译
webpack -p 产品编译及压缩
webpack --watch 开发环境下持续的监听文件变动来进行编译(非常快!)
webpack -d 引入 source maps

4. 编译js

webpack可以和browserify、RequireJS一样作为一个loader(加载工具)来使用。下面我们来看下如何使用webpack去加载、编译CoffeeScript和JSX+ES6。(这里你必须先 npm install babel-loader coffee-loader):

你也要看下babel-loader的介绍，它会作为一个开发环境下的依赖加载到我们的项目中(run npm install babel-core babel-preset-es2015 babel-preset-react)

// webpack.config.js
module.exports = {
  entry: './main.js', // 入口文件
  output: {
    filename: 'bundle.js' // 打包输出的文件
  },
  module: {
    loaders: [
      {
        test: /\.coffee$/,  // test 去判断是否为.coffee的文件,是的话就是进行coffee编译
        loader: 'coffee-loader'
      },
      {
        test: /\.js$/, // test 去判断是否为.js,是的话就是进行es6和jsx的编译
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
};

如果你希望在require文件时省略文件的扩展名，只需要在webpack.config.js中添加 resolve.extensions 来配置。

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.coffee$/, loader: 'coffee-loader' },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  resolve: {
    // 现在你require文件的时候可以直接使用require('file')，不用使用require('file.coffee')
    extensions: ['', '.js', '.json', '.coffee']
  }
};

5. Css样式和图片的加载

首先你需要用require()去加载你的静态资源(named as they would with node's require()):

require('./bootstrap.css');
require('./myapp.less');

var img = document.createElement('img');
img.src = require('./glyph.png');

当你require了CSS(less或者其他)文件，webpack会在页面中插入一个内联的