目录

• webpack概念
• 5个基本配置
• 模式（mode）
• 入口 （entry）
• 出口（output）
• loader
• 插件（plugins）

webpack概念

• webpack 是一个流行的前端项目构建工具，可以解决目前web开发的困境。
• webpack 提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性

5个基本配置

模式（mode）

• 配置模式以启用相应的 webpack 内置的优化

module.exports = {
mode: 'development ' // production 生产或开发模式
}

入口 （entry）

• 用来告诉 webpack 哪些模块或库需要打包，可以指定一个或多个入口（ 以对象形式 ），默认

  ./src

const { resolve } = require('path')
// 用于分离程序与第三方库的入口
module.exports = {
entry: {
app: resolve('src/index.js'),
vendors: resolve('src/vendors.js)'
}
}

出口（output）

• 告诉 webpack 在哪输出所打包的文件，以及如何命名这些文件，接收值为对象，默认值

  ./dist

// path 目标输出目录的绝对路径
// filename 用于输出文件的文件名
module.exports = {
output: {
path: resolve('dist'),
filename: 'bundle.js'
}
}

• 如果配置了多个入口，要确保每个文件名称唯一

module.exports = {
entry: {
app: resolve('src/index.js'),
vendors: resolve('src/vendors.js)'
},
output: {
path: resolve('dist'),
filename: '[name].js'
}
}
// 生成 ./dist/app.js, ./dist/vendors.js

loader

• 因为 webpack 自身只能处理

  js

  相关的文件，

  loader

  可以将所有类型的文件转换为 webpack 能够处理的有效模块，再进行打包
• 使用相应的 loader 先要安装对应的 loader包，例

  npm i style-loader

  test

  用于标识出应该被对应的 loader 进行转换的某个或某些文件

• use

  表示进行转换时，应该使用哪个 loader

tips: loader 的调用顺序是从后往前

module.exports = {
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.(png|jpg|gif)$/, use: ['url-loader?limit=18888'] },  // limit 设置文件上传的最大值
{ test: /\.js$/, use: ['babel-loader'], exclude: /node_modules/ }, // exclude 排除项 排除路径包含/node_modules/的js文件
{ test: /\.vue$/, use: ['vue-loader'] }
]
}
}

• js 高级语法，webpack 也不默认支持，需要使用babel转化为兼容的js代码 安装babel转换器
  

  npm install babel-loader @babel/core @babel/runtime -D

• 安装babel语法插件包
  

  npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

• 配置

  babel.config.js

  文件

module.exports = {
presets: ['@babel/preset-env'],
plugins: ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]
}

插件（plugins）

• 可以用来处理各式各样的任务，功能极其强大，不仅限于压缩打包模块

// 默认预览页
const HTMLPlugin = require('html-webpack-plugin')
const htmlPlugin = new HTMLPlugin({
template: resolve('src/index.html'),
// url 预览页名
filename: 'index.html'
})

module.exports = {
plugins: [htmlPlugin]
}

配置自动打包

• 默认情况下，我们更改入口js文件的代码，需要重新运行命令打包 webpack，才能生成出口的js文件，那么每次都要重新执行命令打包
• 安装自动打包功能的包

  npm install webpack-dev-server -D

• 修改

  package.json

"scripts":{
// --open 自动打开网页
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
}

• 运行

  npm run dev

打包发布项目

• 配置

  package.json

"scripts":{
"build": "webpack -p"
}

• npm run build