1.npm init初始化，生成package.json包
2.npm install .生成package-lock.json
3.再package.json里再test下面新写命令，"build" : "webpack", 同时webpack.config.js里，path:path.resolve(__dirname,'dist'),filename:'bundle.js',之后npm run build
4.很有可能全局和本地的版本不一致，所以配置build，可以在终端里下载webpack , npm install webpack@3.6.0 --save-dev
5.在package.json里发现devDependencies（开发时依赖），dependencies（运行时依赖）
6.loader：（1）css文件转成js文件，main.js引入css文件，require('./css/normal.css')
(2)去webpack官网下载对应的loader，loaders里找样式，按照步骤npm安装，以及webpack.config.js里配置module
（3）css-loader只负责将css文件加载，style-loader负责加载css样式
（4）use里，从右至左执行
（5）配置图片时，在webpack.config.js里新创建个pubilcPath:"dist" ，这样打包后的图片会出现在dist文件夹里
7.loader：es6转成es5：终端npm install --save-dev babel-loader@7 babel-core babel-preset-es2015，在Webpack.config.js里 修改options: {
presets: ['es2015']
}
8.webpack配置vue：npm install vue --save，因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖，
（1）在main.js里引入vue
import Vue from 'vue'
new Vue({
el:"#app",
data:{
message:"你好啊"
}
})，
（2）在webpack.config.js里配置
resolve:{
//alias:别名
alias:{
'vue$':'vue/dist/vue.esm.js'
}
}
（3）npm install --save-dev vue-loader vue-template-compiler
9.Plugin：插件 const path = require('path')
const webpack = require('webpack')
module.exports = {
plugins:[
new webpack.BannerPlugin('最终版权归summer所有')
]
},
重新打包，查看bundel.js文件头部，会看到/*最终版权归summer所有*/
10.把index.html打包到dist文件夹里，
（1）下载插件：npm install html-webpack-plugin --save-dev
(2)修改webpack.config.js中plugins部分内容
1.导入模块 const htmlWebpackPlugin = require('html-Webpack-Plugin')
2.plugins:[
new webpack.BannerPlugin('在最终版权归summer所有'),
new htmlWebpackPlugin({
template:'index.html'
}),
]
11.js压缩 的Plugin：压缩js代码
（1）npm install uglifyjs-webpack-plugin@1.1.1 --save-devs
（2）修改webpack.config.js文件，使用插件：
const uglifyJsPlugin = require('uglifyjs-webpack-plugin')
plugins:[
new webpack.BannerPlugin('在最终版权归summer所有'),
new uglifyJsPlugin()
]
12.搭建本地服务器：这个本地服务器基于node.js搭建，内部由express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果
终端：npm install --save-dev webpack-dev-server@2.9.1
devserver也是作为webpack中的一个选项，选项本身可以设置如下属性：
contentBase:为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
port:端口号
inline：页面实时刷新
historyApiFallback：在SPA页面中，依赖HTML5的hist模式
webpack.config.js文件配置: devserver:{
contentBase:'./dist',
inline:true },
再配置另一个scripts：--open参数表示直接打开浏览器 "dev":"webpack-dev-server --open"
13.配置文件合并：npm install merge
