一、基本概述

webpack本质是, 一个第三方模块包, 用于分析, 并打包代码

• 支持所有类型文件的打包
• 支持less/sass => css
• 支持ES6/7/8 => ES5
• 压缩代码, 提高加载速度

二、安装

• 创建一个文件并运行以下命令：

npm init -y
npm i webpack webpack-cli -S

• 运行命令 npx webpack --mode=development 如果是生产模式需要将mode改成production。这样就能自动生成一个dist/main.js文件。引入这个文件浏览器就能够运行了。

三、配置文件

• 新建webpack.config.js文件，并配置：

const path = require('path');

module.exports = {
  mode: 'production',
  // 指定入口文件
  entry: './src/index.js',
  // 输出配置
  output: {
    // 输出的文件名
    filename: 'app.js',
    // 输出文件的路径 这个路径要写绝对地址
    path: path.resolve(__dirname, 'dist'),
  },
};

• 运行 npx webpack 它会自动去找webpack.config.js文件中的配置，根据配置来生成打包文件。
• 配置脚本：在package.json文件中配置

"scripts": {
    "serve": "npx webpack"
  },

• 以后运行只需要 yarn serve 或者npm run serve

四、webpack-dev-server插件

1.作用

开启一个web服务器，实现自动打包代码

2.使用

• 安装 npm install webpack-dev-server -S
• 修改package.json中的脚本"serve": "npx webpack serve"
• webpack.config.js中将mode修改为development

mode: 'development'

五、html-webpack-plugin插件

1.作用

让webpack打包时, 自动生成html文件

2.使用

• 下载： npm i --save-dev html-webpack-plugin
• 配置脚本：在package.json文件中配置

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

plugins: [
    new HtmlWebpackPlugin({
      // 指定模版页面
      template: 'template.html',
      // 根据模版页面生成的页面名字
      filename: 'index.html',
    })
  ]

• 然后直接运行： npm run serve 进入开发阶段。
• 如果项目要上线了，单独配置 "build": "npx webpack" 这时运行npm run build 会打包出index.html和app.js

官网：webpackhttps://webpack.js.org/