webpack总结（1）

react+es6+webpack   常见前端开发组合

webpack特性：

 模块打包器 ，代码分割，loaders，模块热更新（在开发工程中实时保存）

安装webpack

1.初始化 npm init

2.安装webpack

模块之间用require引用

引用css文件，

require("./style.css")

安装

npm install css-loader style-loader --save-dev

引用css，前进行css-loader处理：

require("style-loader!css-loader! ./style.css")

css已经被打包进来，还多了一些内置函数。

在html中，引用打包好的js文件

require("style-loader!css-loader! ./style.css")每次引入loader较为复杂，通过加参数，--module-bind 给模块绑定需要的loader（bug：双引号）

--watch参数，自动更新，自动打包

--progress 查看打包进度过程

--display-modules 列出要打包的所有模块

--display-reasons 列出要打包该模块的原因

webpack配置文件

新建webpack.config.js文件

webpack.config.js基本配置

在package.json中，也可以追加webpack的配置参数

html-webpack-plugin  webpack的插件，不固定的hash值为文件名更改到html中引用的js文件名中。先按照了再说

现在呢，所有打包生成的文件都在js目录下，怎么更改呢？

publicpath，相当于一个占位符，设置上线地址的前缀

设置后的结果如下，方便上线设置