webpack入门

参考：http://www.jianshu.com/p/42e11515c10f

安装webpack：npm install webpack -g

一切皆模块

Webpack有一个不可不说的优势，它把全部的文件均可以当作模块处理，包括你的JavaScript代码，也包括CSS和fonts以及图片等等等，只有经过合适的loaders，它们均可以被当作模块被处理。

CSS

webpack提供两个工具处理样式表，css-loader 和 style-loader，两者处理的任务不一样，css-loader使你可以使用相似@import 和 url(...)的方法实现 require()的功能,style-loader将全部的计算后的样式加入页面中，两者组合在一块儿使你能够把样式表嵌入webpack打包后的JS文件中。

......

你还记得吗？webpack只有单一的入口，其它的模块须要经过 import, require, url等导入相关位置，为了让webpack能找到”main.css“文件，咱们把它导入”main.js “中，以下

一般状况下，css会和js打包到同一个文件中，并不会打包为一个单独的css文件，不过经过合适的配置webpack也能够把css打包为单独的文件的。
不过这也只是webpack把css当作模块而已，我们继续看看一个真的CSS模块的实践。

//main.js import React from 'react'; import {render} from 'react-dom'; import Greeter from './Greeter'; import './main.css';//使用require导入css文件 render(<Greeter />, document.getElementById('root'));

CSS module

在过去的一些年里，JavaScript经过一些新的语言特性，更好的工具以及更好的实践方法（好比说模块化）发展得很是迅速。模块使得开发者把复杂的代码转化为小的，干净的，依赖声明明确的单元，且基于优化工具，依赖管理和加载管理能够自动完成。
不过前端的另一部分，CSS发展就相对慢一些，大多的样式表却依旧是巨大且充满了全局类名，这使得维护和修改都很是困难和复杂。

最近有一个叫作 CSS modules 的技术就意在把JS的模块化思想带入CSS中来，经过CSS模块，全部的类名，动画名默认都只做用于当前模块。Webpack从一开始就对CSS模块化提供了支持，在CSS loader中进行配置后，你所须要作的一切就是把”modules“传递都所须要的地方，而后就能够直接把CSS的类名传递到组件的代码中，且这样作只对当前组件有效，没必要担忧在不一样的模块中具备相同的类名可能会形成的问题。具体的代码以下

插件（Plugins）

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程当中生效，执行相关的任务。
Loaders和Plugins经常被弄混，可是他们实际上是彻底不一样的东西，能够这么来讲，loaders是在打包构建过程当中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操做单个文件，它直接对整个构建过程其做用。

Webpack有不少内置插件，同时也有不少第三方插件，可让咱们完成更加丰富的功能。

使用插件的方法

要使用某个插件，咱们须要经过npm安装它，而后要作的就是在webpack配置中的plugins关键字部分添加该插件的一个实例（plugins是一个数组）继续看例子，咱们添加了一个实现版权声明的插件。

//webpack.config.js
var webpack = require('webpack');

module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",
  output: {...},

  module: {
    loaders: [
      { test: /\.json$/, loader: "json" },
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel' },
      { test: /\.css$/, loader: 'style!css?modules!postcss' }//这里添加PostCSS
    ]
  },
  postcss: [
    require('autoprefixer')
  ],

  plugins: [
    new webpack.BannerPlugin("Copyright Flying Unicorns inc.")//在这个数组中new一个就能够了
  ],

  devServer: {...}
}

 

经过这个插件，打包后的JS文件显示以下

知道Webpack中的插件如何使用了，下面给你们推荐几个经常使用的插件

HtmlWebpackPlugin

这个插件的做用是依据一个简单的模板，帮你生成最终的Html5文件，这个文件中自动引用了你打包后的JS文件。每次编译都在文件名中插入一个不一样的哈希值。

安装

 npm install --save-dev html-webpack-plugin

Hot Module Replacement

Hot Module Replacement（HMR）也是webpack里颇有用的一个插件，它容许你在修改组件代码后，自动刷新实时预览修改后的效果。
在webpack中实现HMR也很简单，只须要作两项配置

1. 在webpack配置文件中添加HMR插件；
2. 在Webpack Dev Server中添加“hot”参数；

不过配置完这些后，JS模块其实仍是不能自动热加载的，还须要在你的JS模块中执行一个Webpack提供的API才能实现热加载，虽然这个API不难使用，可是若是是React模块，使用咱们已经熟悉的Babel能够更方便的实现功能热加载。

...