关于 webpack 的研究

webpack的官网：http://webpack.github.io/

安装`webpack`

演示项目安装，使用全局安装：npm install webpack -g
真正的项目使用依赖式安装，保证在其他机器上也能运行，不依赖全局的webpack：npm install webpack --save-dev

项目常用命令：

npm init
npm install webpack --save-dev

配置

可以在命令行直接制定配置，正式项目中不会使用此种方式
在项目根目录新建文件webpack.config.js，webpack会自动找此配置文件，正式项目中使用此种方式
webpack会自动处理require的js文件，其他文件（如：css、image）需要使用loader，使用前需要先下载
loader下载命令：npm install url-loader -save-dev
运行webpack使用：webpack --display-error-details，后面的参数“--display-error-details”是推荐加上的，方便出错时能查阅更详尽的信息（比如 webpack 寻找模块的过程），从而更好定位到问题。

webpack的主要命令有：

$ webpack --config XXX.js   //使用另一份配置文件（比如webpack.config2.js）来打包
 
$ webpack --watch   //监听变动并自动打包
         
$ webpack -p    //压缩混淆脚本，这个非常非常重要！
         
$ webpack -d    //生成map映射文件，告知哪些模块被最终打包到哪里了

externals用于关联外部依赖，如jquery可以在外部使用script形式引入，如下：

module.exports = {
	entry: "./src/index.js",
    output: {
        path: "./build/",
        filename: "main.js",
        publicPath: "../build"
    },
    externals: {
    	"jquery": "jQuery"
    },
    module: {
        loaders: [
            { test: /.css$/, loader: "style!css" },
            { test: /.html$/, loader: "html" },
            { test: /.jpg|.png$/, loader: "file?name=/image/[path][name].[ext]" }
        ]
    }
}

之后在代码中引入jquery可用var $ = require("jquery");形式，webpack生成的代码如下：
```
// 源代码
var $ = require("jquery");

// webpack生成代码片段

var $ = __webpack_require__(8);

/* 8 */
/***/ function(module, exports) {

	module.exports = jQuery;

/***/ }
```

像jquery这样的形式，可以不引用到模块中，直接使用，如$("#demo").html(dom);，但是建议使用模块化语句，保持统一

css-loader

概要

github地址：https://github.com/webpack/css-loader
安装命令：npm install css-loader --save-dev

'Root-relative' urls

如果url以“/”开头，默认情况下不会转换，如：
url(/image.png) => url(/image.png)
可以使用root参数统一设置，如：
loaders: [ { test: /.css$/, loader: "style-loader!css-loader?root=." }, ... ]
结果：
url(/image.png) => require("./image.png")

Local scope

使用:local和:global命令声明
api中关于命令的描述没看明白，根据自己理解应该是，带括号的可以指定一行中的某一个class，不带括号的标识这行都是制定的模式。原文：With :local (without brackets) local mode can be switched on for this selector. :global(.className) can be used to declare an explicit global selector. With :global (without brackets) global mode can be switched on for this selector.
不建议使用ID做样式的选择器，使用class替代ID，原文：You can use :local(#someId), but this is not recommended. Use classes instead of ids
css类的默认命名规则是[hash:base64]，可以自定义css类的命名规则，如：css-loader?localIdentName=[path][name]---[local]---[hash:base64:5]
可以使用css-loader的modules参数修改为默认开启Local scoped模式，如：css-loader?modules

压缩css

使用css-loader参数minimize压缩css文件的大小，格式如下：css-loader?minimize

问答

如何把css单独达成一个文件

答：使用插件：ExtractTextPlugin，配置如下

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  entry: {
    main: "./src/index.js"
  },
  output: {
    path: "./build",
    filename: "[name].js",
    publicPath: "http://cdn.example.com/[hash]/"
  },
  module: {
    loaders: [
      // 把css样式打包到js中
      // {test: /.css$/, loader: "style!css?localIdentName=[name]__[local]___[hash:base64:5]"},
      // 把css样式单独成一个文件
      {test: /.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader?localIdentName=[name]__[local]___[hash:base64:5]")},
      {test: /.html$/, loader: "html"},
      { test: /[.jpg|.png]$/, loader: "file?name=[path][name].[ext]" }
    ]
  },
  plugins: [
        new ExtractTextPlugin("[name].css")
    ]
}