关于 webpack 的研究

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

安装webpack

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

   npm init
   npm install webpack --save-dev
   

配置

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

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

7. 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;

/***/ }
```

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

css-loader

概要

1. github地址：https://github.com/webpack/css-loader
2. 安装命令：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

1. 使用:local和:global命令声明
2. 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.
3. 不建议使用ID做样式的选择器，使用class替代ID，原文：You can use :local(#someId), but this is not recommended. Use classes instead of ids
4. css类的默认命名规则是[hash:base64]，可以自定义css类的命名规则，如：css-loader?localIdentName=[path][name]---[local]---[hash:base64:5]
5. 可以使用css-loader的modules参数修改为默认开启Local scoped模式，如：css-loader?modules

压缩css

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

问答

1. 如何把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")
         ]
     }