创建package.json文件
命令：npm init
安装webpack
npm install --save-dev webpack
npm install --save-dev webpack-cli
全局安装：
npm install --global webpack webpack-cli
打包
默认entry入口 src/index.js
默认output出口 dist/main.js
打包模式：
webpack --mode development
webpack --mode production
二、配置webpack.config.js
新建一个webpack.config.js
配置入口entry(所需打包的文件路径)
配置出口output
(1)path指文件打包后的存放路径
(2)path.resolve()方法将路径或路径片段的序列处理成绝对路径
(3)__dirname 表示当前文件所在的目录的绝对路径
(4)filename是打包后文件的名称
三、入口entry和出口output进阶用法
入口entry
(1)单入口
单文件：
例如： entry：‘./src/index.js’
多文件：
在你想要多个依赖文件一起注入，并且将它们的依赖导向到一个“chunk”时，传入数组的方式就很有用。
例如：entry：[‘./src/index.js’,‘./src/index2.js’,.......]
(2)多入口
例如：
entry:{
pageOne: ‘./src/pageOne/index.js‘,
pageTwo: ‘./src/pageTwo/index.js‘,
pageThree: ‘./src/pageThree/index.js‘
}
出口output
(1)单出口
output: {
path: path.resolve(__dirname, ‘dist‘),
filename: ‘bundle.js‘
}
(2)多出口
output：{
path:path.resolve(__dirname,‘dist‘),
filename:‘[name].js‘
}
四、配置webpack-dev-server
了解webpack-dev-server
webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。
webpack-dev-server 主要提供两个功能：
(1)为静态文件提供服务
(2)自动刷新和热替换(HMR)
安装webpack-dev-server
npm install --save-dev webpack-dev-server
配置webpack.config.js文件
devServer:{
contentBase:‘./build, //设置服务器访问的基本目录
host:‘localhost‘, //服务器的ip地址
port:8080, //端口
open:true //自动打开页面
}
配置package.json
"scripts": {
"start": "webpack-dev-server --mode development"
}
五、1. 了解loader
loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
安装loader
安装style-loader和css-loader
下载：
npm install style-loader css-loader --save-dev
配置loader
(1)在webpack.config.js文件里配置module中的rules
在 webpack 的配置中 loader 有两个目标：
test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性，表示进行转换时，应该使用哪个 loader。
代码：
九、使用PostCSS处理浏览器前缀
(1)处理效果
