webpack的认识与基本使用

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