关于 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;

   /***/ }
   ```

8. 像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")
     ]
     }

     ```

转载于:https://www.cnblogs.com/tgwang/p/6926170.html