一、概念
webpack的核心是一个用于现代JavaScript应用程序的静态模块打包程序。当webpack处理您的应用程序时，它会递归地构建一个依赖图，其中包含应用程序所需的每个模块，然后将所有这些模块打包到一个或多个包中。
在开始学习之前我们需要了解它的四个核心概念：
- 入口（entry）
- 产量（output）
- 装载机（loader）
- 插件（plugins）
入口(entry)
入口就是整个程序打包的入口文件，入口文件里面有各种引入文件的依赖关系，进入之后，webpack会找出依赖的其他js,css等模块，下面是一个简单的entry配置示例：
在webpack.config.js（webpack默认的启动入口）
module.exports = {
entry:{
main:'./src/script/main.js',
},
};
entry里面你可以根据需求配置多个入口，示例如下
module.exports = {
entry:{
main:'./src/script/main.js',
a: './src/script/a.js',
b: './src/script/b.js',
c: './src/script/c.js'
},
};出口(output)
输出属性告诉webpack将打包后的文件存放在哪里以及如何命名这些文件。您可以通过output在您的配置中指定一个字段来配置这一部分：
webpack.config.js
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),//resolve是node里面path的一个方法，指向绝对路径
filename: 'my-first-webpack.bundle.js'//文件打包后的文件名
}
};上面的代买中output.path表示文件打包后的存放路劲，output.filename表示文件打包后的文件名
切记：webpack2.0以上的版本输出文件必须设置绝对路径，不然会报错
装载机(loader)
loader的作用是能让webpack处理其他非js文件，原则上webpack只认识js文件，webpack打包时会通过loader处理文件，会把引入的文件都当做模块来处理，常见的loader有style-loader,css-loader,file-loader,url-loader,less-loader等
loader在webpack配置中有两个目的：
- test属性表示哪种类型的文件应该被转换
- use属性指示应该使用哪个加载器进行转换
webpack.config.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.exports = config;
上面的配置rules为具有两个必需属性的单个模块定义了一个属性：test和use。这告诉webpack的编译器如下：
“嘿，webpack编译器，当你遇到一个路径，解析到一个”.txt“文件里面的一个require()/ import语句，使用它raw-loader来转换它，然后再添加到包。
插件(plugins)
虽然loader被用来转换某些类型的模块，但是插件可以用来执行更广泛的任务。插件的范围从捆绑优化和缩小到定义类似环境的变量。插件的功能是非常强大，可以用来解决各种各样的任务。
为了使用一个插件，你需要require()它并将其添加到plugins数组中。大部分插件都可以通过选项进行自定义。既然你可以在一个配置中多次使用一个插件来达到不同的目的，你需要通过调用new操作符来创建它的一个实例。
webpack.config.js
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;