Webpack 基础以及常用插件使用方法

一、前言

本质上，Webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
如果对你有帮助，欢迎三连 收藏点赞关注！！！

---- NickYoung

概念 | webpack 中文文档

二、修改打包入/出口

配置步骤

• 项目根目录，新建 Webpack.config.js 配置文件
• 导出配置对象，配置入口，出口文件路径（别忘了修改磁盘文件夹和文件的名字）
• 重新打包观察

const path = require('path')

module.exports = {
   
  entry: path.resolve(__dirname, 'src/login/index.js'),
  output: {
   
    path: path.resolve(__dirname, 'dist'),
    filename: './login/index.js'  
  }
}

三、常用插件使用

html-webpack-plugin

让 Webpack 拥有自动生成 html 文件能力，并引入打包后的其他资源

• 步骤：
  • 下载 html-webpack-plugin 本地软件包到项目中

npm i html-webpack-plugin --save-dev

• 配置 webpack.config.js 让 Webpack 拥有插件功能

// ...
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
   
  // ...
  plugins: [
    new HtmlWebpackPlugin({
   
      template: './public/login.html'