Webpack深入与实战
如果把项目开发的过程比作用积木搭房子的过程，Browserify:封装了各种各样的的小积木块，那怎么把这些积木块搭建成房子呢，这时需要用grunt或者gulp去把一个个task进行合并、检验、压缩，最后形成一所房子，这样的配置过程实在是太耗费时间、精力了。
但是webpack的思想就不太一样，webpack直接就把用积木搭建的房子给予了项目开发者，它自身就包含了构建流程，假如搭建的房子并不理想或者想要稍稍修改一下，那么可以通过修改webpack的配置文件来解决，简单来说，webpack是一个基于对开发目的精准预测下的可配置系统。
webpack引入资源的方式很简单，如图片、css文件，和common js规范引入其他js文件的方式相同，使用require指令，common js规范规定每个文件就是一个单独的模块，每个模块是一个单独的作用域。
moudle.exports=App;
require(‘App’);
并且webpack会智能地根据我们引入资源文件的大小来决定最终应该以什么样的方式来发布使用这个文件。
代码分割（code splitting）：只去加载当前只需加载的文件，即按需加载
Loader：module可以通过loader去处理各种各样的文件，如JS文件（Common JS、AMD、ES6模块化方式），CSS文件、图片文件、JSON文件、自定义文件等等。
插件系统：模块热更新，对开发调试有效率
Webpack安装：
cd workspaces
Mkdir webpack-test
Cd webpack-test
Npm init
Npm install webpack --save-dev
Webpack打包css文件时会报错，因为它自身不带要css loader，所以要先下载
Npm install css-loader style-loader--save-dev
然后再指定style.css文件的加载器：require(‘style-loader!css-loader!./style.css’)
css-loader能够使得webpack处理css文件，style-loader能够将css-loader处理完的文件新建一个<style>标签，插入在html文件中的<head>标签中。
Webpack基本配置：
在项目中新建webpack.config.js文件，用于webpack基本配置，在命令行输入webpack命令会自动读取默认的配置文件webpack.config.js，来进行打包前的设置，当然也可以使用config参数来更改默认的配置文件
webpack--config webpack.dev.config.js指定打包时默认的配置文件。
moudle.exports={
entry: ’.src/script/main.js’,
output:{
path: ’./dist/js’,
filename: ’bundle.js’
}
}
在webpack加参数时与parse.json结合使用，然后npm run webpack
entry：打包入口
entry: ’.src/script/main.js’,
entry: [’.src/script/main.js’, ‘.src/script/a.js’]两个不相依赖的文件打包在一起
entry：{
main: ’.src/script/main.js’,
a: ‘.src/script/a.js’
}
output: {
path:’./dist’,
filename:’js/[name]-[hash].js’//多个出口文件[chunkhash]
}
Webpack插件
安装：npm html-webpack-plugin --save-dev
使用：
在webpack.config.js文件中的对象新添一个插件属性：
plugins:[
newhtmlWebpackPlugin({
filename: ‘index-[hash].html’,
template: ‘index.html’,
inject: ‘head’,
title: ‘webpack is good’//<%= htmlWebpackPlugin.options.title%>
})
]
Loader
var htmlWebpackPlugin =
require('html-webpack-plugin');//引入插件，先得安装
var path = require('path');
module.exports = {
entry:'./src/script/main.js',
entry:['./src/script/main.js','./src/script/a.js'],//将两个不相干的文件打包在一起
output:{
path:'./dist',
filename:'js/bundle.js'
}
entry:{
main:'./src/script/main.js',
a:'./src/script/a.js'
},//
output:{
path:'./dist/js',
filename:'[name].js'
filename:'[hash].js'//每次打包的hash值，每次打包名字都不一样
filename:'[chunkhash].js'//每次打包后的文件版本号hash值，若文件无改动，则名字不改变
publicPath:'http://cdn.com/'//线上地址
},
module:{
loaders:[
{
test:/\.js$/,
loader:'babel',
include:path.resolve(_dirname,'src'),
exclude:path.resolve(_dirname,'node_modules'),
query:{
presets:['latest']//设置babel转译时使用最新版本，即es5,es6,
}
}
]
},
plugins:{
newhtmlWebpackPlugin({
template:'index.html',
filename:'index-[hash].html',
inject:'head',
title:'webpack is good'，
minify:{
removeComments:true,
collapseWhitespace:true
},
chunks:['main','a']
}),
newhtmlWebpackPlugin({
template:'index.html',
filename:'a.html',
inject:'body',
title:'webpack is very good'，
minify:{
removeComments:true,
collapseWhitespace:true
},
chunks:['c']
})
}
//模板template为根目录下的index.html
//在根目录下的index.html中修改<%=htmlWebpackPlugin.options.title %>
//minify用于压缩index.html文件，去除注释和空格
//多个htmlWebpackPlugin对象，意味着生成多个html文件，即多页面应用
}
