DEMO地址：http://pan.baidu.com/s/1eR4s2uI

1.前言

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

模块化，让我们可以把复杂的程序细化为小的文件;

类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；

Scss，less等CSS预处理器

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。

2.安装

webpack可以通过npm安装，首先你得安装nodejs(注：npm版本号最好为3.x版本以上)

//全局安装

npm install -g webpack

在你的目录里面创建一个package.json的文件，这是一个标准的npm说明文件，里面包含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。在终端中使用npm init命令可以自动创建这个package.json文件。

npm init

//安装到你的项目目录,并且添加在package.json文件里

npm install --save-dev webpack

输入后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。举个栗子，这是我生成后的目录，src目录放置原始文件，build放置生成后文件，node_modules 放置npm下载的文件包,webpack.config.js是配置文件。

3.使用webpack

首先创建一个webpack.config.js文件，这是一个配置项目，告诉webpack需要做什么。

这是一份此DEMO基础的配置文件。

var webpack= require('webpack');

var HtmlWebpackPlugin= require('html-webpack-plugin');

var path= require('path');

var CleanPlugin= require('clean-webpack-plugin');//清楚目录

var ExtractTextPlugin= require('extract-text-webpack-plugin');

module.exports= {

entry: {

index:"./src/js/main.js",

},//入口

output: {

path:path.resolve(__dirname,'build'),//打包后文件地址

//  publicPath:'/assets/',  //指定资源文件引用的目录

filename:"[name]-[hash].js"//可以打包为多个文件

},

module: {

loaders:[

{

test:/\.css$/,

loader:ExtractTextPlugin.extract({

fallback:'style-loader',

use: [{

loader:'css-loader',

options: {

}

}],

})},

{

test:/\.js$/,

loader:'babel-loader',

exclude:/node_modules///需要排除的目录

},{

test:/\.scss$/,

loader:ExtractTextPlugin.extract({

fallback:'style-loader',

use: ['css-loader','sass-loader']

})//css文件分离

},

{

test:/\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,

loader:'file-loader',

options: {

name:'src/images/[name].[hash].[ext]'

}

},

{

test:/\.(png|jpg|gif|svg|ico)$/,

loader:'file-loader',

options: {

name:'src/images/[name].[hash].[ext]'

}

}

]

},

plugins: [

new HtmlWebpackPlugin({

template:'./index.html'// 模版文件

}),

new CleanPlugin(['build']), //删除目录

new webpack.optimize.UglifyJsPlugin({//压缩js代码

compress: {

warnings:false

}

}),

new ExtractTextPlugin('[name]-[hash].css')//css文件打包压缩

]

};

entry：

entry参数定义了打包后的入口文件，可以是个字符串或数组或者是对象；如果是数组，数组中的所有文件会打包生成一个filename文件；如果是对象，可以将不同的文件构建成不同的文件:

{

entry: {

page1:"./page1",

//支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出

page2: ["./entry1","./entry2"]

},

output: { path:"dist/js/page", filename:"[name].bundle.js"}

}

该段代码最终会生成一个 page1.bundle.js 和 page2.bundle.js，并存放到 ./dist/js/page 文件夹下。

output：

这个参数为一个对象，定义了输出文件的位置和名字：

path:打包文件存放的绝对路径

publicPath:网站运行时的访问路径

filename:打包后的文件名

当我们在entry中定义构建多个文件时，filename可以对应的更改为[name].js用于定义不同文件构建后的名字。

module:(重点)

通过使用不同的loader，webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理，比如说分析JSON文件并把它转换为JavaScript文件，或者说把下一代的JS文件（ES6，ES7)转换为现代浏览器可以识别的JS文件。，最终返回到JavaScript上

Loaders需要单独安装并且需要在webpack.config.js下的module关键字下进行配置.

{

test:/\.css$/,

loader:'css-loader!style-loader'

},{

test:/\.js$/,

loader:'babel-loader',

exclude:/node_modules///需要排除的目录

},{

test:/\.scss$/,

loader:'css-loader!sass-loader'

},{

test:/\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,

loader:'file-loader',

options: {

name:'src/images/[name].[hash].[ext]'

}},

test:一个匹配loaders所处理的文件的拓展名的正则表达式（必须）

loader:loader项表示用来加载这种类型的资源的loader。

exclude:表示不会处理此目录里的文件

每个模块都需要特定的loader执行，.css 文件使用 style-loader 和 css-loader 来处理

.js模块需要babel来处理， .scss文件需要 css-loader sass-loader node-sass来执行

通过npm 下载特定的loader。

//建议下载多个模块

npm install --save-dev file-loader css-loader style-loader node-sass

PS：下一代的js标准（es6）还没有被浏览器支持，需要babel编译成es5标准。

// npm一次性安装多个依赖模块，模块之间用空格隔开npm

install --save-devbabel-core babel-loader babel-preset-es2015 babel-preset-stage-2

//在当前目录新建个.babelrc 配置文件

touch .babelrc

//打开.babelrc在里面写入

{

"presets": [

"es2015",

"stage-2"

]

}

plugins:

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。要使用某个插件，我们需要通过npm安装它，然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例（plugins是一个数组）举个栗子

//npm 下载

npm install html-webpack-plugin --save-dev

//载入模块

var HtmlWebpackPlugin= require('html-webpack-plugin');

//在plugins 使用，这是一个生成模版文件并且自动载入js文件的插件

new HtmlWebpackPlugin({

template:'./index.html'// 模版文件

}),

4.实验执行webpack打包文件。

在你的package.json写下

"scripts": {

"build":"webpack --config ./webpack.config.js"

},

然后npm run build 执行脚本

此DEMO编译后的目录状态

5.热加载和服务器开启

首先请加载webpack-dev-server(WDS)

npm install webpack-dev-server --save-dev

WDS:是一个小型的Node.js Express服务器，它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时。

在你的webpack.config.js里面写入devServer配置：

devServer:{

//WDS生成的包并没有放入真实目录中，而是放在服务器内存里。

contentBase: './',//本地服务器所加载的页面所载目录

colors: true,

stats:"errors-only",//打印错误日志

port:3000,//端口

historyApiFallback: true,//不跳转

inline: true,//自动刷新开启

watch:true,//检测

hot:true //热模块替换开启

}

并且在plugins里面写入

new webpack.HotModuleReplacementPlugin(),//模块热替换 实时编译

在package.json里面写入

"scripts":{ "start":"webpack-dev-server" }

执行npm run start后 访问http://localhost:3000

6.多页面生成（后续补充）