webpack
1.什么webpack
webpack是一个现代化JavaScript应用程序的模块打包器。当webpack处理应用程序时，它会递归地 构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有与这些模块打包成一个或者多个bundle。
入口（entry）
需要打包的入口文件，webpack会根据入口文件的依赖关系，自动把依赖的文件进行打包
webpack.config.js
出口（output）
output属性告诉webpack在哪里输出所创建的bundles，以及如何命名这些文件。你可以通过在配置中制定一个output字段，在配置这些处理过程。
loader
loader是让webpack处理那些非JavaScript文件，把不同类型的文件转化为webpack能够处理的有效模块，然后利用webpack的打包能力，对它们进行处理，一般用两个属性进行配置
1.识别出应该被对应的loader进行转换的那些文件。（使用test属性）
2.转换这些文件，从而使其能够被添加到依赖图中（并最终添加到bundle中）（use属性）
不同的文本类型需要不同的loader
module.exports= {
entry:"index.js",
output:{
//路径
path:path.resolve(__dirname,'dist'),
//输出的文件名
filename:'bundle.js'
},
module:{
rules:[
test:/\.txt/,
use:'raw-loader'
]
}
}
插件（plugins）
插件主要增加webpack的功能，打包优化，压缩文件，快速构建项目等等。使用方法 通过require（）方法应用插件，然后把它添加到plugins数组中。多数插件可以通过选项（option）的自定义。你也可以在一个配置文件中因为不同的目的多次使用同一个插件，这时需要通过使用new操符来创建它的实例
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry:{ app:'./src/main.js', print:'./src/print.js' },
output:{ filename:'[name].bundle.js',
path:path.resolve(__dirname,'dist')
},
module:{
rules:[
{
test:/.css$/,
use:['style-loader', 'css-loader' ] }] },
plugins:[ new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({title:'output Manager'})
] };
