如何在项目中使用webapck

随着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,这里只负责带着大家入门一下。如有疑问欢迎留言。