随着ES6的推进，从以往的CommonJS和AMD。到如今ES6中的module方案，前端模块化越来越成熟，模块化原本在后端开发中的理念，如今在前端开发中越来越火爆，前端正在像后端一样变得健壮，从MVC的设计思路再到模块化，以及ES6和TypeScript的推出不得不说前端越来越像后端的语言一样了，有了class,也有了强类型，不知道这样发展的前端是好是坏，我总觉的前端是一群搞后端的人在推进一样，什么都照搬后端的思想，好了，说了些废话，咱们言归正传，既然用到了模块化，我们就需要去根据它模块之间的依赖关系去打包它，这就需要用到了模块的打包工具，目前打包工具有很多，比如gulp,grunt,webpack等，那么为什么选择webpack呢，首先webpack不仅仅是一款打包工具，它的功能极其强大，它能后打包压缩我们几乎所有的资源，能处理sass,less这种动态css文件，还能编译各种插件，还有就是配合vue,ng，react这三大框架的开发工作，包括node.js 的一些开发工作也会用到webpack,所以说webpack几乎全能。好了我们来写个小例子，
第一步 新建项目文件夹
创建项目
npm init //初始化
然后安装webpack
```
cnpm install webpack --save -dev 或者 npm install webpack --save -dev
```
然后如图所示建立下列文件
其中webpack.config.js 是我们的需要配置的webpack文件，别的目录就像我们正常项目一样的目录没有什么特别的
对了两个js之间，互相依赖一下，模拟一下模块的打包效果。其次就是建立一个dist(名字可以自己随意取)文件夹用来存放打包后的文件。
a.js
```
exports.find=function(){
console.log('456');
}
```
branch.js
```
var fin = require('./a.js');
function demo(){
console.log('123');
}
```
main.js
```
alert('哈哈');
```
内容很少，因为越少，讲解起来新人才更容易听的懂。
好了我们来看一下webpack配置文件里的代码：
```
var htmlWebpackPlugin = require('html-webpack-plugin');//插件
var webpack = require('webpack');//webpack自身模块
var path = require("path");//node.js中的文件模块，因为涉及文件的写入操作，必须借助node才可以
module.exports = {
//入口文件配置
entry: {
main:"./src/js/main.js",
branch:"./src/js/branch.js"
},
//打包的出口文件配置
output:{
path: path.resolve(__dirname, './dist'),
filename: 'js/[name]-[chunkhash]-min.js'
},
//插件
plugins: [
//绑定html关联的插件
new htmlWebpackPlugin({
template:'index.html',
filename:'index-[hash].html',
inject:'head'
}),
//打包压缩js的插件
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
}
```
内容就是这么多，大家可以在命令行里运行一下webpack命令
也可以更改packge.json中的文件自定义打包的命令如下
```
{
"name": "webpack01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack --config webpack.config.js --progress --display-modules --colors"
},
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.6.0"
}
}
```
现在运行npm run webpack就好了，你会看到如下一样的效果。
好了，具体webpack 的更多使用方法，可以参考官网的API,这里只负责带着大家入门一下。如有疑问欢迎留言。
网友评论