标签：开发包 包括 彩色 pac 它的 name 设置 一段 手工
webpack是一个模块打包工具，给js准备的打包工具，可以把很多的模块打包成很少的文件，特性:代码分割，只加载所需文件，模块通过loaders处理各种文件
处理过程:把有各种依赖的文件通过webpack打包处理成css,js,图片文件
目标:1.切分依赖数，分到不同代码块里，按需加载，懒加 载
2.任何静态资源都可以被视为一个模块，在项目中被引用
3.整合第三方类库，把类库也视为它的模块，在项目中被引用
4.初始化加载时间更少
5.在整个打包过程中可以自定义
6.适合做大型项目
特性:代码分割，loader,插件系统，模块热更新
文件夹dist:存放最终发布版本的代码
dev:开发者版本，开发包
npm init:生成package.json，避免要手工生成
--save-dev：npm install 在安装 npm 包时，有两种命令参数可以把它们的信息写入 package.json 文件，一个是npm install --save另一个是 npm install --save-dev
--save-dev 是你开发时候依赖的东西，--save 是你发布之后还依赖的东西。
如果不使用–save/–save-dev安装模块的话需要手动更新package.json里的dependencies和devDepandencies，而使用–save/–save-dev就可以自动更新package.json了
webpack安装好后，在文件夹里新建一个js文件hello.js
命令行中在当前文件夹下输入webpack hello.js hello.bundle.js(每次写完依赖，命令行执行此句即可)
输出的内容:
Asset:打包生成的文件名称；Size:打包生成的文件的大小；Chunks:这次打包的分块；Chunk Name：这次打包的块名称
在js里依赖加载文件word.js在文件头部写上：require(‘./word.js‘)
依赖css文件:require(‘style-loader!css-loader!./style.css‘)需要安装loader (npm install css-loader style-loader --save-dev)
--module-bind:模块绑定 --module-bind ‘css=style-loader!css-loader‘
--watch:这个可以自动更新更改过的代码，无需每次更改代码后都在命令行里敲上文件
--progress打包过程，有百分比进度显示
--display-module:引用的所有模块都列出来，包括引用的方式
--display-reasons:模块打包原因列出来
自己设置参数可以在wenpack.json文件里scripts属性里添加一段脚本，这个脚本可以是一段命令，如:
"webpack":"webpack --config webpack.config.js(定义config文件) --progress(看到打包过程) --display-modules(打包的模块) --colors(命令行里打包出来字的颜色是彩色的)"
然后命令行里输入npm run webpack
标签：开发包 包括 彩色 pac 它的 name 设置 一段 手工
原文地址：http://www.cnblogs.com/chooper/p/7372635.html
