什么是webpack
Webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
为什么使用webpack
webpack会把各种资源(js,png,css,less,等等)都作为模块来使用和处理,最后转化成一系列的静态资源。
webpack提供了一系列的模块加载器（loader）来编译这些模块。比如处理less文件，webpack提供了less-loader将less文件处理成css，然后再通过css-loader加载成css模块，最后由style-loader加载器对其做最后的处理,等等。当然，你还可以定制自己的加载器处理自己的特需需求
安装webpack
全局安装：
$ npm install webpack -g
本地安装（直接写入项目 package.json 包）：
npm install webpack --save-dev
webpack入口(Entry)
webpack 将创建所有应用程序的依赖关系图表(dependency graph)。图表的起点被称之为入口起点(entry point)。入口起点告诉 webpack 从哪里开始，并遵循着依赖关系图表知道要打包什么。可以将您应用程序的入口起点认为是根上下文(contextual root)或 app 第一个启动文件。
在 webpack 中，我们使用 webpack 配置对象(webpack configuration object) 中的 entry 属性来定义入口。
1.单个文件入口
const config = {
entry: './path/to/my/entry/file.js'
};
module.exports = config;
2.多个页面
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
webpack出口(Output)
将所有的资源(assets)归拢在一起后，我们还需要告诉 webpack 在哪里打包我们的应用程序。webpack 的 output 属性描述了如何处理归拢在一起的代码(bundled code)。
1.单入口单出口
{
entry: './src/app.js',
output: {
filename: 'bundle.js',
path: __dirname + '/build'
}
}
2.多入口多文件
{
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/build'
}
}
webpack加载器(Loaders)
loader 是对应用程序中资源文件进行转换。它们是（运行在 Node.js 中的）函数，可以将资源文件作为参数的来源，然后返回新的资源文件。
使用 loader 告诉 webpack 加载 CSS 文件，或者把 *.vue 文件转换成 webpack 包，和整个打包过程融合起来，安装相对应的 loader
<img src='http://upload-images.jianshu.io/upload_images/63643-eafb96ce6d182546.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240' / width = '100%'>
npm install --save-dev css-loader
npm install --save-dev vue-loader
module-rules 允许你在 webpack 配置中指定几个 loader。
module: {
rules: [
{
test: /\.js$/,
use: [{
loader: 'babel-loader'
}],
exclude: /node_modules/
},
{
test: /\.vue(\?[^?]+)?$/,//解析vue文件
use: [{
loader: 'vue-loader' //用vue-loader去解析
}]
}
]
}
webpack插件(Plugins)
插件目的在于解决 loader 无法实现的其他事
例如使用 UglifyJsPlugin 进行 JS 文件压缩
const webpack = require('webpack');
module.exports = {
/*...*/
plugins:[
new webpack.optimize.UglifyJsPlugin({
sourceMap: options.devtool && (options.devtool.indexOf("sourcemap") >= 0 || options.devtool.indexOf("source-map") >= 0)
})
]
};
webpack教程链接
手册网(2.2)教程:http://www.shouce.ren/api/view/a/13313
webpack官方教程:https://doc.webpack-china.org/guides/
