介绍

webpack原理

webpack其实是一个平台，在平台中会安装/融入/配置各种打包规则
- mode：打包模式「开发环境development、生产环境production」
- entry：入口「webpack就是从入口开始，根据CommonJS/ES6Module模块规范，分析出模块之间的依赖，从而按照相关的依赖关系，进行打包的」
- output：出口
- loader：加载器「一般都是用于实现代码编译的，但是想编译啥代码，我们需要安装对应的加载器，并且完成相关的规则配置 webpack.docschina.org/loaders/」
- plugin：插件「处理的需求比较多了，例如：压缩、编译HTML、清空打包... webpack.docschina.org/plugins/」
- resolve：解析器
- optimization：优化项
- devServer：配合webpack-dev-server，在本地启动Web服务，实现项目预览以及跨域处理...

webpack是基于Node.js进行打包的，把打包后的内容，都是交给浏览器去访问的
- 支持CommonJS模块规范「我们写的配置规则，就是基于CommonJS规范处理的」
- 支持ES6Module模块规范
- 两种规范在webpack中可以混淆使用「webpack内部做了处理」

webpack server

在本地创建一个 web 服务器，把按照规则打包的内容进行预览
开发环境下，实时预览作品

使用

基础

安装webpack

yarn add webpack webpack-cli -D
npm i webpack webpack-cli -D
配置可执行脚本命令 => package.json
- 前提是 node_modules/.bin目录下，需要有这样的命令文件，才说明安装在本地的模块可以使用命令

{
  "name": "webpack-basic",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack"
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1"
  }
}

执行脚本命令
- yarn start （-> $ webpack）
- npx webpack

默认去找 src/index.js，把其作为打包的入口，进行打包
- 打包后的内容输出到 dist/main.js 中

以上两步操作，直接基于 $ npx webpack 处理也是一样的！！！

开发时自动编译工具

webpack-dev-server (推荐)

安装devServer
- npm i webpack-dev-server webpack -D
index.html中修改 <script src="/bundle.js"></script>
运行
- npx webpack-dev-server
- npx webpack-dev-server --hot --open --port 8090
配置package.json的scripts
- "dev": "webpack-dev-server --hot --open --port 8090"
运行npm run dev
- devServer会在内存中生成一个打包好的bundle.js
- 专供开发时使用，打包效率高，修改代码后会自动重新打包，刷新浏览器

修改webpack.config.js

const path = require('path')
// 遵循 commonjs 规范
module.exports = {
  // 入口文件配置
  entry: './src/index.js',
  // 出口文件配置项
  output: {
    // 输出的路径，webpack2起就规定必须是绝对路径
    path: path.join(__dirname, 'dist'),
    // 输出文件名字
    filename: 'bundle.js'
  },
  devServer: {
    port: 8090,
    open: true,
    hot: true
  },
  mode: 'development' // 默认为production, 可以手动设置为development, 区别就是是否进行压缩混淆
}

修改package.json的scripts: "dev": "webpack-dev-server"
运行npm run dev

webpack-dev-middleware

webpack's Watch Mode

监视本地项目文件的变化, 发现有修改的代码会自动编译打包, 生成输出文件

配置package.json的scripts"watch": "webpack --watch"
运行npm run watch

const path = require('path')

// webpack的配置文件遵循着CommonJS规范
module.exports = {
  entry: './src/main.js',
  output: {
    // path.resolve() : 解析当前相对路径的绝对路径
    // path: path.resolve('./dist/'),
    // path: path.resolve(__dirname, './dist/'),
    path: path.join(__dirname, './dist/'),
    filename: 'bundle.js'
  },
  mode: 'development',
  watch: true
}

运行npm run build

应用场景

同时打包两个 src 下面的js文件

a.js

console.log('a模块')

// commonjs 语法规范

// module.exports = {
//   name: 'aaa',
// }

// ES6 的导出语法规范

export default {
  name: 'aaa',
}

index.js

// 属于 commonjs 规范，在浏览器里默认不支持
// 在 node 里支持，可以在webpack打包之后被浏览器识别

// let a = require('./a.js')

// ES6 的语法规范

import a from './a'

console.log(a)

console.log("index")

优化 webpack 总结-上

介绍

webpack原理

webpack server

使用

基础

开发时自动编译工具

webpack-dev-server (推荐)

webpack-dev-middleware

webpack's Watch Mode

应用场景