标签：dom 引用 预处理 htm json rip modules 构建 change
参考自 https://segmentfault.com/a/1190000006178770
Webpack可以看作是模块打包工具：所做的事情就是：分析项目结构，找到javascript模块及其他浏览器不能直接运行的扩展语言（Scss、TypeScript等），并将其打包为合适的格式以供浏览器使用。
Webpack的工作方式：把项目当作一个整体，通过一个给定的主文件（入口文件）index.js，Webpack将从这个文件开始找到项目所有的依赖文件，使用loaders处理它们，最后打包为一个浏览器可是别的js文件。
步骤：1空文件夹中npm install -g webpack; 2 npm init自动创建package.json文件包含当前项目的依赖模块，自定义脚本任务等；3 npm install --save-dev webpack 本项目中安装webpack作为依赖包
4 目录结构 app文件夹用来存放 原始数据 和 即将要写的 js模块，public文件夹用来存放准备给浏览器读取的数据（包括用webpack生成的打包后的js文件和index.html（此唯一目的就是加载打包后的js文件）文件.
webpack的使用
方法一；命令行中使用：webpack {entry file/入口文件} {destination for bundled file/存放bundle.js的地方}
方法二：通过配置文件使用：根目录下创建webpack.config.js的文件，
webpack功能：
1调试
生成Source Maps ,提供一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，更易调试。
配置sorce maps 需要配置devtool：‘eval-source-map‘
2 构建本地服务器，监测代码的修改
基于node.js构建，安装组件 npm install --save-dev webpack-dev-server
devtool:‘eval-source-map‘，
devServer:{contentBase:‘./public‘,colors:true,historyApiFallback:true,inline:true
3 Loaders
webpack通过调用外部脚本或工具可以对各种各样的格式文件进行处理，分析JSON文件转换为javascript文件，或把ES6转换为js，jsx转换为js。
单独安装且在modules关键字下进行配置：test:一个匹配要处理的文件的拓展名的正则表达式；loader：名称；include/exclude手动添加必须处理的文件，或屏蔽不需要处理的文件；query：为loaders提供额外的设置选项。
npm install --save-dev json-loader
4.Babel
Babel是一个js编译平台，可以编译ES6、ES7、JSX
安装依赖包npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
npm -install --save react react-dom
5.一切皆模块 CSS
webpack提供两个工具处理样式表，css-loader和style-loader, css-loader能够使 @import 和 url(...)的方法实现require()的功能；style-loader将所有的计算后的样式加入页面中， 两者组合在一起能使样式表潜入到webpack打包后的js文件中。
npm install --save-dev style-loader css-loader
6 CSS预处理器Sass Less
PostCSS来为CSS代码自动添加适应不同浏览器的CSS前缀。
npm install --save-dev postcss-loader autoprefixer
使用在webpack配置文件中进行设置，只需新建一个postcss关键字，并在里面声明依赖的插件
7 Plugins插件
在整个构建过程中生效，执行相关任务。区别：loaders是在打包构建过程中用来处理源文件的jsx scss less..，一次处理一个，插件并不能直接操作单个文件，他直接对整个构建过程起作用。
使用：1npm安装 2 在plugins关键字部分添加该插件的一个实例
推荐插件：htmlWebpackPlugin(依据简单的模版生成最终的html5文件，且自动引用了打包后的js文件。
npm install --save-dev html-webpack-plugin
标签：dom 引用 预处理 htm json rip modules 构建 change
原文地址：http://www.cnblogs.com/yxiaoqian/p/6128370.html
