随着前端技术的不断发展，现代 Web 应用变得越来越复杂，需要大量的 JavaScript 代码和各种资源文件进行开发。同时，前端项目也需要考虑性能优化、兼容性问题、构建部署等繁琐的工作，这些都使得前端开发变得愈发困难。为了解决这些问题，前端工程化逐渐成为了一个必须掌握的技能。而 Webpack 作为前端工程化中最受欢迎的打包工具之一，其强大的功能和灵活的配置方式备受开发者青睐。本文将简单聊一聊Webpack都有哪些内容，基本使用方法。希望能够帮助读者更好地理解 Webpack，并在实际开发中灵活运用。

1、webpack五大核心概念

1.1 Entry

入口、指示webpack以那个文件为入口起点开始打包，分析构建内部以来图。

1.2 Output

输出指示webpack打包后的资源bundles输出到哪里，以及如何命名。

1.3 Loader

Loader让webpack能够去处理那些非JavaScript文件（webpack自身只理解JavaScript）。

1.4 Plugins

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

1.5 Mode

模块指示webpack使用相应的模式配置，有development开发者模式，和production上线模式。

2、js语法检测

Package.json文件中配置项：

"eslintConfig":{

  "extends":"airbnb-base"

 }

Webpack.congig.js文件中的配置项：

 {
       test:/.js$/,
        // 设置不检查的文件
        exclude:/node_modules/,
        loader:'eslint-loader',
        option:{}
      }

安装检查js代码插件：npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D

3、js兼容配置

3.1、Js兼容性插件

babel-loader @babel/preset-env @babel/core

3.2、匹配.js文件

需要排除框架的文件，不让他检查，否则会报错。下边为语句

 exclude:/node_modules/

3.3再option中预设babel做怎样的处理

presets:['@babel/preset-env']

4、PWA离线访问

PWA:渐进式网络开发应用程序（离线可访问）

workbox–>workbox-webpack-plugin

1、webpack配置文件定义

const WorkboxWebpackPlugin = require('workbox-webpack-plugin')

2、插件引入

new WorkboxWebpackPlugin.GenerateSW({
      //帮助serviceworker快速启动
      //删除旧的serviceworker
      //生成一个serviceworker配置文件
      clientsClaim:true,
      skipWaiting:true
   })

3、入口文件注册serveWorker，并处理兼容问题

if('serviceWorker' in navigator){
 window.addEventListener('load',()=>{
  navigator.serviceWorker
  .register('./service-worker.js')
  //then方法查看是否注册成功
  .then(()=>{
   console.log('注册成功')
  })
  .catch(()=>{
   console.log('注册失败')
  })
 })

5、多线程打

安装插件： npm i thread-loader –D

使用方法：

使用不当，有可能会影响打包速度

6、设置不打包jquery

使用externals

mode:'production',
externals:{
//拒绝jQuery被打包进来
jquery:'jQuery'
}
}

7、dll处理第三方库重复打包问题

a、新建一个js文件封装忽略打包的库

/*使用dll技术，对（第三方库;jquery,react,vue...）进行单独打包 

使用webpack --config webpack.dll.js 运行此打包配置文件*/
const {resolve} = require('path')

const webpack = require('webpack')

module.exports={

  entry:{
   //最终打包生成的[name]-->jquery
    //['jquery']-->要打包的库是jquery
    jquery:['jquery']//这里可以传入多个第三方库，逗号隔开

  },
  output:{
 filename:'[name].js',
    path:resolve(__dirname,'dll'),
    library:'[name]_[hash]'//打包库里向外暴露出去的内容叫什么名字
  },

  plugins:[
   //打包生成一个manifest.json-->提供和jquery映射
    new webpack.DllPlugin({
      name:'[name]_[hash]',//映射库暴露的内容名称
      path: resolve(__dirname,'dll/manifest.json')//输出文件路径
    })
  ],
  mode:'production'
}

b、运行一次新建的js文件打包一次，后面就不用运行了，正常使用webpack.confi.js打包就行运行新建js命令 webpack –config (新建js文件名)

c、在webpack.config.js文件中配置那些文件不需要打包

const webpack = require('webpack')
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin')
plugins:[
        new HtmlWebpackPlug({
      template: './src/index.html'
    }),
    //告诉webpack那些库不参与打包，同时使用时的名称也得改变
    new webpack.DllReferencePlugin({      manifest:resolve(__dirname,'dll/manifest.json')
    }),
    //将某个文件打包输出出去，并在html中自动引入该资源
    new AddAssetHtmlWebpackPlugin({
      filepath:resolve(__dirname,'dll/jquery.js')
    })
  ],

8、entry的具体使用

a、字符串形式（string） entry:'./**/**'

单入口

生成一个chunk文件，输出一个bundle

Chunk的默认名字为main

b、数组形式（array） entry：['./src/**','./src/**']

多入口

所有文件最终只会生成一个chunk，输出只有一个bundle文件

使用场景为HMR功能，让html热更新生效

c、对象形式（object） entry：{index：'./src/**', add:'./src/**'}

多入口

有几个入口文件就生成几个chunk，输出几个bundle文件

Chunk的文件名为键名（key）

d、特殊用法

总结

由于时间有限这篇文章先写这些，感兴趣的朋友可以关注一下，下一篇文章将会围绕output的具体使用以及loader和优化等相关内容进行解读，很快会更新下一篇，谢谢阅读！😄

浅聊webpack——新手应该知道的内容（上）