基于此,开发提供webpack的支持,使开发能及时跟进前端的快速变化,保证项目开发与较新的技术接轨,提高开发效率。
1、安装nodeJS
https://nodejs.org/en/
nodeJS是基础运行环境,默认下载最新版本即可,提供对npm的支持
2、初始化工程
npm init
过程可以按照需要填写相应的配置信息,默认生成package.json文件(其中devDependencies中的babel后续内容讲解)
{ "name": "webpack-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "haiyupeter", "license": "ISC", "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1" } }
此文件中 scripts 非常重要,可以直接使用 npm test直接跑scripts中的test命令
(1)添加 "start": "webpack-dev-server --devtool eval --progress --colors --inline"
可以使用使用 npm start 直接启动服务器,保证webpack-dev-server启动默认的webpack.config.js,如果不用名称“start”则需要加上 npm run ***
(2)再添加
"build-common": "webpack-dev-server --devtool eval --progress --colors --inline --config webpack.common.config.js"
// 指定配置文件为webpack.common.config.js,如此可以保证可以多个任务同时执行,保证多个任务同时进行,可以按需要生成不同类型的文件
(3)参数 --content-base ./common-build 用于指定当前的webpack的基础目录,能同时处理不同的目录的文件,如此实现只要在一个工程里面配置和安装webpack相关的配置即可,而并不需要安装多个
3、示例工程目录webpack-test
/es6
-- main.js
-- Person.js
index.html
webpack.config.js
4、安装webpack
npm install -g cnpm --registry=https://registry.npm.taobao.org
// 使用淘宝的镜像cnpm,用于代理网络上的一些插件到国内,回忆下载速度
cnpm install webpack -g // 全局加载webpack
cnpm install webpack-dev-server -g // 全局加载服务器,支持实时更新
cnpm install babel-core --save-dev // 开发环境babel-core
cnpm install babel-loader --save-dev // 开发环境babel-loader
cnpm install babel-preset-es2015 --save-dev // 安装ES2015转码规则
cnpm install webpack --save-dev // 一般都会用到webpack,开发环境出也依赖,否则require('webpack')会报错
babel的介绍可参考阮一峰的文章:http://www.ruanyifeng.com/blog/2016/01/babel.html
5、webpack配置文件webpack.config.js
var path = require('path'); module.exports = { entry: "./es6/main.js", output: { path: __dirname, filename: "bundle.js" }, //设置开发者工具的端口号,不设置则默认为8080端口 devServer: { inline: true, port: 8181 }, module: { loaders: [ { test: path.join(__dirname, 'es6'), loader: 'babel-loader', query: { presets: ['es2015'] } } ] } }
(1)entry入口文件:可以为数组对象,提供打包多个文件的可能。
如 {
"index": ["main1.js", "main2.js", "main3.js"],
"goods": ["goods1.js", "goods2.js", "goods3.js"]
}
(2)output输出文件:[name]/[name].js // 可以选择为通用的生成名字,如此可以保证引用的文件的正确性
loaders为加载器,加载器可以参考链接 http://webpack.github.io/docs/list-of-loaders.html
(3)devServer为webpack-dev-server服务器的开发环境和端口设置等
6、各文件内容详解
Person.js
class Person{ constructor(name, age) { this.name = name; this.age = age; } say() { return '我是' + this.name + ',我今年' + this.age + '岁了。'; } } export default Person;
main.js
import Person from './Person.js'; let p = new Person('张三3', 20); document.write(p.say());
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test es6</title> </head> <body> <script src="bundle.js"></script> </body> </html>
7、打成多文件示例
新增main2.js
import Person from './Person.js'; let p = new Person('李四', 20); document.write(p.say());
修改webpack.config.js
var path = require('path'); module.exports = { entry: { "main": ["./es6/main.js"], "main2": ["./es6/main2.js"] }, output: { path: __dirname, filename: "[name].js" }, module: { loaders: [ { test: path.join(__dirname, 'es6'), loader: 'babel-loader', query: { presets: ['es2015'] } } ] } }
此时打出 main.js 和 main2.js(根据entry的key输出的)
index.html引用如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test es6</title> </head> <body> <script src="main.js"></script> <script src="main2.js"></script> </body> </html>
8、安装插件,支持目录构建
plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: "vendor", // filename: "vendor.js" // (给 chunk 一个不同的名字) minChunks: Infinity // (随着 entry chunk 越来越多, // 这个配置保证没其它的模块会打包进 vendor chunk) }), new webpack.BannerPlugin('此处理为打注释专用'), // 启动压缩 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ]
CommonsChunkPlugin 用于抽取通用的JS,保证JS的正确性,此插件可以用多可,生成多个通用文件
BannerPlugin 助于向文件添加注释
UglifyJsPlugin 开启代码压缩,在正式环境中使用
9、实际使用中
请将开发环境和正式环境分开,保证在正式环境的文件是最小的,效率最高;而在测试环境,则是最大化文件,易于调试
参考文章:
http://www.runoob.com/w3cnote/webpack-tutorial.html
https://www.cnblogs.com/vajoy/p/4650467.html
https://segmentfault.com/a/1190000003970448
http://www.jianshu.com/p/42e11515c10f
http://www.jianshu.com/p/a64735eb0e2b
http://web.jobbole.com/86984/