标签：

作为从grunt、gulp一路走来的老码农，一开始用webpack的时候我是很抗拒的。但由于核心库使用了vue，而webpack又是vue的最佳拍档（vue作者专门为其写了vue-loader），所以用webpack来构建项目就成了自然而然的工作。颠末一段时间的摸索，各个流程都跑通了，「从入门到放弃」的那点事也就都不算事了。

webpack是以模块为中心的打包工具，但由于其日渐丰富的插件，能做的工作已经很多了，从开发环境搭建到上线构建，几乎可以一条龙承办了。事实上我在比来的项目中，连gulp都省了，完全用webpack就完成了所有的事情。下面一一道来。

本地server

在前后端疏散的大前提下，前端本地已不需要起后端处事了，那为什么还要起一个本地server呢？这个server主要供给以下撑持：

静态资源访谒

代码热更新（实时刷新浏览器）

模拟请求数据

代办代理http请求

本地server是由webpack插件webpack-dev-middleware供给的，它是基于express的，所以还需要把express也装上。配置代码相当简单：

var devMiddleware = require(‘webpack-dev-middleware‘)(compiler, { publicPath: config.output.publicPath, stats: { colors: true, chunks: false } }); app.use(devMiddleware);

凡是我们把它生存为dev-server.js，然后共同npm script来启动这个server，在package.json中写好：

"scripts": { "dev": "node ./build/dev-server.js" }

然后一行命令就可以启动了：npm run dev

需要注意的一点事，当我们起了本地server之后，webpack打包后的文件并不写入到硬盘上，而是生存在内存中。所以你并不会在目录下看到生成的文件，但是浏览器已经能够凭据路径进行访谒了，这样开发环境下的编译速度就大大加快。

独立vue组件

用了webpack之后，写vue组件最爽的就是可以写成单独的.vue文件了，在一个文件中写好所有的样式、模板、js逻辑。然后vue-loader就会帮我们编译成标准的vue组件。

令人开心的是，vue2.0引入了虚拟DOM来提高性能，vue-loader也会将我们的模板编译成虚拟DOM来使用，你也不必费劲再去写render函数了。

编译ES6

之前也说过项目已经完全用ES6了，所以我们在开发环境需要用babel进行编译，我们写ES6代码的处所有两个，一个是js文件，另一个是.vue文件中的。

js文件的在webpack配置文件中配置loader即可：

{ test: /\.js$/, loader: ‘babel‘, exclude: /node_modules/ }

而.vue文件中的，vue-loader已经天然帮我们做了，所以不需要任何设置。

babel的配置项，写在.babelrc中放在根目录下即可。

编译sass

前端进入编译时代，css固然也是少不了的。项目中使用了sass来编写css代码，所以也需要在开发环境进行编译。需要编译的有两个处所，一个是外链的.scss文件，另一个是.vue文件中的。

对付.scss文件，我们还是用loader来措置惩罚惩罚，安置sass-loader，然后在webpack配置文件中配好：

{ test: /\.scss$/, loader: ExtractTextPlugin.extract(‘style‘, ‘css!sass‘) }

至于.vue文件中的，vue-loader早帮我们做好了事情，只需在<style>标签加上lang属性就可以了，例如编译sass

<style lang="sass"> /*此处可以写sass代码啦*/ </style>

代码查抄

在开发阶段进行代码查抄也是一项须要事情，查抄ES6固然eslint是标配，在配置文件中可以通过preLoaders来配置：

preLoaders: [ { test: /\.(js|vue)$/, exclude: /node_modules/, loader: ‘eslint-loader‘ } ]

这样在js文件和.vue文件中的代码城市用eslint法则进行查抄。eslint的配置同样写在.eslintrc文件中放在根目录下。

代码热更新