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 插件和加载器的学习和运用的过程,纸上得来终觉浅 绝知此事要躬行,动手试试吧。
来源: http://www.cnblogs.com/afrog/p/7145111.html