用webpack实现前端自动化构建

什么是自动化的前端构建流？

   1. 自动补全css私有前缀，自动转化less\sass为css，自动转化es6\vue\jsx语法为js，自动打包小图片为base64以减小http请求，自动给js,css,甚至img加hash值，以免浏览器缓存，自动合并压缩代码，自动刷新实时预览效果（甚至免刷新），能够按照本身喜欢的目录结构存放原始资源文件，为了方便手机等访问，不须要搭建apache、nginx等服务器实现http访问......

如何快速开始

 首先 git clone https://github.com/bjtqti/font-end-boilerplate.git  一份到本地

 而后 npm install && npm run start

 最后打开浏览器，运行http://localhost:4000

接下来看看目录结构：

解析一下这些目录的用途：

|-  dist下面存放发布的js、css 文件 （自动生成）

|- node_modules 下面是npm安装的包文件 （自动建立）

|- src 存放具体的业务代码

|- task 存放webpack的配置代码

|- task

     |- webpack.api.conf.js 用于webpack的api方式的配置文件 server.js用到

     |- webpack.dev.conf.js 用于CLI方式使用webpack 的配置

     |- webpack.prod.conf.js 用于生产环境打包输出的配置

|- .postcssrc.js  post-loader的插件配置文件，因为后面用了postcss.config.js因此重命名了这个

|- .babelrc babel的配置文件，为了解析es6语法

|- .gitignore git的配置，指出要不参与版本控制的文件及文件夹

|- .package.json 包配置文件

|- postcss.config.js  post-loader配置

|- README.md github.com自动建立的项目说明文件

|- server.js  本地开发调式用的web服务器

须要重点掌握的是package.json 其次是server.js 和 task相关的配置内容

先看看package.json:

{
  "name": "shop",
  "version": "1.0.0",
  "description": "webapp frontend shop",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "dev": "webpack-dev-server --config ./task/webpack.dev.conf.js",
    "build": "webpack --config ./task/webpack.prod.conf.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "mall",
    "shop"
  ],
  "author": "frog",
  "repository": "https://github.com/bjtqti/font-end-boilerplate.git",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.5.2",
    "css-loader": "^0.28.4",
    "express": "^4.15.3",
    "extract-text-webpack-plugin": "^2.1.2",
    "html-webpack-plugin": "^2.29.0",
    "postcss-loader": "^2.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^2.6.1",
    "webpack-dev-middleware": "^1.11.0",
    "webpack-dev-server": "^2.5.0",
    "webpack-hot-middleware": "^2.18.0"
  },
  "dependencies": {
    "babel-plugin-transform-runtime": "^6.15.0"
  }
}

　　

这个文件其实就是一个json对象，里边重点掌 scripts 的用法。好比start：node server.js  对应 npm run start （或 npm start)  这条命令就至关因而在node环境下运行了server.js

那么server.js(文件名能够自已定）里边保存了一些什么内容？

var express = require("express");
var webpack = require("webpack");
var path = require('path')
var app = express();
var webpackConfig = require("./task/webpack.api.conf.js");
var compiler = webpack(webpackConfig);


var devMiddleware = require('webpack-dev-middleware')(compiler, {
	  contentBase: webpackConfig.output.path,
  	publicPath: webpackConfig.output.publicPath,
  	//hot: true,
    //stats: { colors: true },
  	quiet: true
})

var hotMiddleware = require('webpack-hot-middleware')(compiler, {
	//lazy: true,
	//path:'/hmr',
	log: () => {}
})

app.use(express.static('./dist'));
app.use(hotMiddleware)
app.use(devMiddleware)

app.listen(4000, function () {
  console.log("Listening on port 4000!");
});

　　

其实就是使用了express来搭建一个小型的开发服务器。而后引用webpack-dev-middleware和webpack-hot-middleware两个中间件，结合webpack.api.conf.js的配置，实现打包和热加载src下面的代码。因为这里涉及到express的知识，不打算涉及全栈的前端只需了解一下便可，由于后面还有一个封装好的工具能够替代这些工做--webpack-dev-server

因此我在script中添加了一个dev：webpack-dev-server 的命令，这全完是为了方便学习这两种方式的应用，实际上任选其中一种就行了，这一种可能会感受更简单，由于它是第一种方式的封装，可是要深刻的了解，仍是建议看看第一种方式，Vue-cli也是采用的第一方式，由于它可供开发者自由支配的空间更大。惟一须要注意的是，若是使用webpack-dev-server的话，目前还不能用webpack3.0+。

接下来运行npm run build  看看，dist目录下是否是多了一些文件？这就是未来能够直接发布到线上的代码了。

到这里，打包，发布 都介绍完了，下面简单演示一下热替换（也就是所谓的无刷新替换效果）。为了演示方便，我在src下放了一些代码. 

当咱们打开http://localhost:4000的时候，浏览器上有一段绿色的文字:Hello world 还有一个时间毫秒数，加这个毫数的目的是为了演示，若是页面刷新了，数字会改变。

而后修改style.css中的内容，好比把字体颜色改为红色，浏览器上的字体颜色也相应的变化了，而数字没有发生改变。若是手动刷新的话，能够看到数字是会变化的。

这不只会节省时间，并且对于要保存页面状态（好比某按钮选中）的状况很是有用。当咱们修改hello.es6的时候，页面变成了自动刷新，这是由于我没有使用js的热替换加载器。

若是对html的修改，也想要自动刷新的话，须要用到插件，发出相应的事件。好比vue-cli中的方式：

// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
})

这里只是发出一个通知：action:'reload'，要使页面自动从新加载，还须要有一个接收通知的代码：

好比在入口中加入：

/* eslint-disable */
require('eventsource-polyfill')
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')

hotClient.subscribe(function (event) {
if (event.action === 'reload') {
window.location.reload()
}
})

这个地方比较深奥，没有弄明白也不要紧，有其它方式一样能够实现。好比webpack-dev-server 内部已经自动完成了对不支持热替换的加载器，自动降为刷新。

这也是为何在开发环境下使用了extract-text-webpack-plugin（提取css的插件）后，样式的热替换变成了刷新效果的缘由。

 

小结：

   经过对webpack的运用，搭建一个前端自动化构建工做流程，作到学以至用。对一些经常使用的webpack配置和插件有了实践经验以后，即使去用vue-cli这样现成的工具，也能够放心的按照本身的实际状况去修改了。自动化构建的过程，其实就是对webpack插件和加载器的学习和运用的过程，纸上得来终觉浅 绝知此事要躬行，动手试试吧。