现在的web前端越来越酷炫，每开发一个Web应用，需要依赖的js、css等资源越来越多，在html里需要写很多例如：
<script src=“aaa.js”></script>的标签，导致前端代码非常臃肿且不好维护，web pack解决了这个问题，它可以把所有依赖的
资源:js、css 、png、jpg等文件打包成一个大的bundle.js文件，虽然众多的js、css文件中可能存在着复杂的依赖关系，但是这些
都包含在bundle.js里，在html页面只需要引入这个一个文件就可以了。
下面介绍webpack的4个核心概念，在开始使用webpack之前，一定要了解这些。
Entry:
web pack把应用的依赖画成了一个依赖关系图，图的起点就是entry。webpack会根据这个图得知都需要依赖那些文件，并把他们打包，在配置文件中，用entry这个属性配置，栗子：
webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js'
};
Output:
web pack把代码打成一个bundle文件之后，需要被告知把这个文件放在哪，栗子：
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
Loaders:
web pack的目的是让浏览器不用关心所有的前端资源：js,css,html,jpg等，因为他们已经被打包成一个大的文件了，对于webpack来说，这些资源都是一个个的module, 但是webpack只认识js,那么其他类型的资源改咋办呢？在配置文件中定义这些：
const path = require('path');
const config = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{test: /\.txt$/, use: 'raw-loader'}
]
}
};
上面的配置文件中，module定义了一个rule数组，告诉webpack如何处理这些类型的文件，每个rule需要2个必需属性：test和use,这个rule的意思就是告诉webpack:当你遇到文件名以.txt结尾的文件时用raw-loader处理它。
Plugins
loaders只在每个文件的基础上进行转换，plugins操作的是打包好的complitaions或chunks, 对它们进行个性化定制，一个plugin的例子：
assets-webpack-plugin plugins可以通过options参数进行配置，在一个配置文件中可以多次使用同一个plugin,并且为他们设置不同的option，因此配置插件需要使用new为它们创建实例。栗子：
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');
const config = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{test: /\.txt$/, use: 'raw-loader'}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
webpack官方文档：webpack
网友评论