Webpack是一个静态资源打包工具，可以把JS及其所依赖的css和图片(都认为是一个模块)打包为一个.js文件，让客户端浏览器只引入最终的js文件，从而实现减少HTTP请求的目的，优化访问速度。
1.安装 Node Js
2.全局安装webpack
npm i -g webpack
3.创建 NPM 项目文件 package.json
npm init 执行完输入相关信息
4.在项目本地安装webpack，保存到项目的开发依赖里面
npm i webpack --save -dev
安装完成后项目目录下会多出一个node_modules文件夹
5.在项目一级目录下创建index.html与entry.js文件，在index.html里面创建script标签，指定引入boundle.js文件，entry.js文件写入与index.html的内容，在命令行输入：webpack entry.js boundle.js，其中entry.js为打包指定入口文件，而boundle.js为打包后生成的结果文件
6.文件之间的相互引用
(1).在需要导出的文件里指定导出内容，如创建一个name.js文件，导出内容为moudle.exports="Augus";
(2).在需要导入内容的文件里指定导入的内容，赋值为一个全局变量，如在entry.js里面，输入var name=require('./name');
(3).执行webpack entry.js boundle.js，name.js里面的内容就会在boundle.js里面生成
7.webpack默认只会处理js文件，如果需要处理html,css,json文件，需要安装转换器loader
(1).安装loader转换器,命令行输入：npm i css-loader style-loader --save –dev
(2).在项目目录下创建一个style.css的文件,编写相关样式
(3).在入口文件(entry.js)里面引入件：require('style-loader!css-loader!./style.css');
A.css-loader允许webpack识别.css的文件
B.style-loader将webpack识别完的css文件中的内容，在编译完运行文件的时候，将这些css用style标签包起来嵌在head内
(4).执行编译命令webpack entry.js boundle.js
8.在项目的根目录下创建webpack的主配置文件webpack.config.js,注意在配置文件里面写入了依赖文件,require时就不需要引入了
代码语言：javascript复制module.exports =
// 指定要打包的文件，注意路径不能省略
entry: './src/js/app.js',
// 指定打包完成后输出的文件
output: {filename: './dist/js/bundle.js'},
// 配置代码调试工具
devtool: 'source-map',
// 声明模块的打包规则
module: {
rules: [
{test:/.css$/, loader:'style-loader!css-loader'},
{test:/.less$/, loader: 'style-loader!css-loader!less-loader'},
{test:/.jpg$/, loader: 'url-loader'},
{test:/.js$/, loader: 'babel-loader'}
]
}
}9.在命令行中执行全局webpack命令，调用webpack.config.js对指定的文件及其依赖的资源进行打包
10.source-map 代码调试工具
程序打包后要调试代码，就需要用到source-map工具，在项目目录文件下输入：webpack --devtool source-map，在控制台的Sources里面就会多出一个webpack文件夹，在一个'点'文件夹里就会生成没有打包之前的文件，在文件需要调试的位置执行debugger，再次执行webpack --devtool source-map，就可以在控制台中没有打包之前的文件里看到相应的运行效果，最后，务必在webpack.config.js文件里面写入配置信息
11.babel 不同版本JS语法转换器
(1).在项目目录文件夹下输入以下命令，添加JS语法转换器
npm install babel-loader babel-core babel-preset-es2015 --save –dev
(2).创建babel配置文件
在项目目录文件夹下创建一个叫babelrc的js文件，在里面添加es2015的预设，输入：{ "preset ":[ "es2015 "]}
(3).在webpack.config.js里面添加loader配置信息
12.webpack –dev-server 开发服务器
该服务器可以在页面发生变化时自动打包刷新页面，它有模块热替换的功能，可以替换只有变化的地方，而不用刷新整个页面
(1).全局安装
npm install webpack –dev –server --global
(2).本地安装，在项目目录下输入
npm install webpack –dev –server --save-dev
(3).自动刷新，热替换
webpack-dev-server --inline –hot
以上3步操作完成后就会生成一个服务器，服务器的默认地址为localhost:8080
