webpack是一种打包工具，将所有的文件打包成一个js文件，减少浏览器的压力。 wepack的打包指令 webpack app/main.js public/index.js//将main.js里面的js文件打包到 index.js，这种方式文件路径比较繁琐因此出现webpack.config.js 文件中是webpack的配置项

module.export={entry:__dIrname+xxxoutput:{path:__dirname+xxx，//打包后文件路径filename:index.js//打包后的文件名字}，module：{loaders:[{test:/\.json$/ ，loader：‘json’}]}}复制代码

webpack的 pakage.json中主要记录

scripts{//执行node的命令的地方dev:"webpack"//执行webpack压缩的指令，使用方式（npm run dev）start:"webpack"///执行webpack压缩的指令，使用方式（npm start）}复制代码

同样是执行压缩命令为啥一个npm run dev一个npm start start是node里面的变量类似js里面的var，因此node认识。

loaders：

loaders需要 单独安装并且需要在webpack.config.js下的module关键字下进行配置。loadders配置项包括以下几个方面 test 一个匹配loaders所处理的文件的拓展名的正则表达式（必须） loader loader名称（必须） include/exclude 手动天剑必须要处理的文件（文件夹）或者屏蔽不需要处理的文件（文件夹）（可选） query 为loaders提供其他的额外设置选项（可选） 一、简单的json文件使用方法： 1、下载json loader cnpm install --save-dev json-loader 2、在webpack.config.js中配置相中加入module模块 二、样式表工具的应用 使用方法一： webpack提供两个工具处理样式表css-loader 和style-loader css-loader 使你能够用类似@import和url（...）的方式实现require的功能 style-loader将所以计算好的样式加入到页面中，二者结合在一起使你吧样式嵌入到webpack打包后的js文件中。 安装命令 npm install --save-dev style-loader css-loader 配制写法 module:{

loaders:[{test:/\.css$/,loader:'style!css'//感叹号的使用在于可以在同一个文件中可以用不同的loader,加载方式是从右到左， 先执行css-loader后执行style-loader压到js文件中去。}]}复制代码

使用方法二：

css3的语法需要添加前缀，这个工作就交给了webpack，方便兼容性问题。 安装插件 npm install --save-dev postcss-loader autoprefixer

配制写法 module:{loaders:[{test:/\.css$/,loader:'style!css!postcss'}],postcss:[require('autoprefixer')]//调用autoprefixer插件}复制代码

三、babel的使用

babel其实是几个模块化的包其核心功能位于babel-core 的npm 包中，不过webpack把他们整合在一起使用，但是对于每一个你需要的功能或扩展，你需要安装单独的包（用的最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包） 安装React npm intall --save-dev react react-fom

配制写法

{test:/\.js$/,exclude:/node_modules/,loader:'babel',//在webpack的module部分的loaders里进行配置即可query：{preset:['es2015','react']}}复制代码

四、插件的使用

插件（plugins）是用来拓展webpack功能的，他们会在整个构建过程中生效，执行相关的任务 loaders和plugins 他们是完全不同的，loaders 是在打包构建过程中用来处理源文件的（jsx，scss，less），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程起作用 使用方式; 1、npm 安装 2、webpack的配制文件中的plugins关键字部分添加该插件的实例 例子：添加版权声明的插件(版权声明插件是webpack自带的并不需要安装插件) 在配制文件webpack.congfig.js文件中

var webpaclk=require('webpack')module.exports={plugins:[new webpack.BannerPlogin('xxxxxxxxxxxxxxxx')]}复制代码

例子使用htmlWebpackPlogin

这个插件的作用是依据一个简单的模板帮你生成最终的h5文件，这个文件自动引用你打包后的js文件，每次编译都在文件名中插入不同的哈希值。 安装 npm install --save-dev html-webpack-plugin 配制:

module.exports={var html=require(''html-webpack-plugin),loaders:{},plogins:[new html({template:__driname+'/app/index.html'//此处是工程的模板文件地址})]}复制代码

打包后自动生成public文件

五、自动打包代码

webpack开发服务器 ，webpack官方提供一个辅助开发工具，他可以自动监控项目下的文件，一旦有修改保存操作，他就会自动执行打包命令，将代码重新打包，如果需要的话可以刷新浏览器。 1、下载webpack-dev-server npm install --save-dev webpack-dev-server 2、参数 contentBase 默认webpack-dev-server 会为根文件夹提供本地服务器，如果想要为另一个目录下的文件提供本地服务，应该在其所在目录 port 设置默认监听端口默认8080 inline 设置为true 当源文件改变是会自动刷新页面 colors 设置为true ，使终端输出的文件为彩色的 historyApiFallback 在开发单页面应用时非常有用，它依赖HTML5 historyAPI 如果设置为true 所有的跳转指向index.html 在webpack.config.js中添加配置

devServer{contentBase:"/public",color:true,inline:true}复制代码

配制好了如何运行？？？

webpack-dev-server有两种启动方式 iframe 该模式下修改代码自动打包，不刷新浏览器。 inline 该模式下修改代码自动打包，刷新浏览器。 运行方式 在命令行输入 webpack-dev-server --inline