webpack（1）为什么需要webpack? 随着web应用的不断发展和变化，JavaScript的生态的不断丰富和语

为什么需要webpack?

随着web应用的不断发展和变化，JavaScript的生态的不断丰富和语言本身的发展，又让我们遇到了更多新的问题,比如一些浏览器无法支持一些高级语法，或者在编写项目时需要较多的文件，我们就需要发送多个请求，如果一个文件请求丢失此时下面又有文件依赖于此文件的页面的部门功能就无法实现。我们就需要工具来帮助我们实现更稳定，性能更高的应用。

当然也有很多打包，解析工具出现如gulp，fis, grant,我们也遇到了webpack,rollup,还有一些新的工具比如vite,snowpack,wmr

由于实践中使用webpak较多，就以此篇开始来记录一下webpack 的学习之路。

内网通截图20220706095940.png

webpack的五大核心

- Entry(入口):指示webpack以哪个文件为入口起点打包。分析构建内部依赖图。

//单入口
entry: path.resolve(__dirname, "./src/index.js"),

//多入口
entry: {
  index1: path.resolve(__dirname, "./src/index1.js"),
  index2: path.resolve(__dirname, "./src/index2.js"),
}

- Output(出口):指示webpack打包后的资源bundles输出到哪里去,以及如何命名。

    output: {
//文件名称(指定名称+目录)
    filename:'js/[name].js'
    //输出文件目录(将来所有资源输出的公共目录)
   path:resolve(__dirname,'dist'),
   // 一般是生产环境,所有资源引入公共路径前缀 --->'imgs/a.jpg'-->'/imgs/a.jpg'
   publicPath:'/',
   library:'[name]',   //整个库向外暴露的变量名
     // 把子应用打包成 umd 库格式
  libraryTarget: 'umd',
 jsonpFunction: `webpackJsonp_${packageName}`,
        },

- Loader: 用于对模块的源代码进行转换；所以 `loader` 的执行层面是单个的源文件。

Loader让webpack能够去处理那些非javaScript文件【图片文件、html文件、样式文件】(webpack自身只理解javascript)

//如使用css-loader  配置规则 
 module: {
        rules: [
          {
            test: /\.css$/i,
            //css-loader只负责将css文件进行加载
            //style-loader负责将样式添加到DOM中
            //使用多个loader时，是从右向左 css-loader进行处理，style-loader再执行
            use: ["style-loader","css-loader"],
          },
        ],
      },

- Plugins(插件):可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。

Egs:在初学webpack都用到的 
// HtmlWebpackPlugin帮助你创建html文件，并自动引入打包输出的bundles文件。

const HtmlWebpackPlugin = require("html-webpack-plugin");

//打包时删除之前的dist打包文件使用的 CleanWebpackPlugin

const CleanWebpackPlugin = require('clean-webpack-plugin');


plugins: [ 
    new HtmlWebpackPlugin({ template:"index.html" }),
    new CleanWebpackPlugin()
 ]

- Mode（模式）：指示webpack使用相应模式的配置。

Mode值，分为develop, dev,none   下面是把mode变量更改打包行为
var config = {
  entry: './app.js',

};

用于在不同条件下设置不同的打包配置
module.exports = (env, argv) => { 
if (argv.mode === 'development') {
config.devtool = 'source-map'; }
if (argv.mode === 'production')
{ //... 
} 
return config
}

webpack（1）