webpack

1.什么webpack

webpack是一个现代化JavaScript应用程序的模块打包器。当webpack处理应用程序时，它会递归地 构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有与这些模块打包成一个或者多个bundle。

入口（entry）

需要打包的入口文件，webpack会根据入口文件的依赖关系，自动把依赖的文件进行打包

webpack.config.js

module.exports = { entry:"index.js" };

出口（output）

output属性告诉webpack在哪里输出所创建的bundles，以及如何命名这些文件。你可以通过在配置中制定一个output字段，在配置这些处理过程。

//这是一个第三方库，需要npm install --save-dev path 下载

const path = require("path");

module.exports= {

entry:"index.js",

output:{

//路径

path:path.resolve(__dirname,'dist'),

//输出的文件名

filename:'bundle.js'

} }

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'})

] };