项目中使用webpack

近期react及vueJs的普及，ES6也有相应的推广及普及，前端的开发模式发生较大的改变。
基于此，开发提供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/

猜你喜欢