Webpack 的基本使用

关键概念

• Entry：入口文件（源代码入口）

• Output：输出文件（分发代码）

• Module：import、css 中的@import、url(...)、...

• Chunk：打包时生成的模块

• Bundle：打包完成的代码

• Mode：development / production

• Loader：用于加载模块时预处理文件

• Plugins：提供自动生成 html 页面、清理、模块热替换等功能

• Configuration：webpack.config.js

• Dependency graph：从入口文件开始递归构建出，并由此进行打包

• Runtime 和 Manifest：连接模块所需的加载和解析逻辑和模块标识集合

• Hot Module Replacement：只更新模块， 而不用重载整个页面

• Public Path：

  • output.publicPath：项目中引用css、js、img等资源时候的一个基础路径
  • devServer.publicPath：打包后资源存放的位置

基本使用

安装

• webpack
• webpack-cli（对于 webpack 4+ 版本）

项目目录结构

webpack-demo
    |- package.json
  |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

• webpack.config.js 为 webpack 配置文件
• /dist 文件夹存放分发代码
• /src 文件夹存放源代码

基础配置

// webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'bundle.js', // 打包后的bundle文件
    path: path.resolve(__dirname, 'dist') // 分发代码存放的目录
  }
};

Webpack 可以接受多个 entry，但只能指定一个 output。

加载资源

除 js 文件外，其他类型的文件需要使用额外的 loader 来加载。

加载CSS

• NPM 安装 style-loader 和 css-loader
• 修改配置文件

webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。在这种情况下，以 .css 结尾的全部文件，都将被提供给 style-loader 和 css-loader。

使用上述方式打包时，CSS 文件将会被编译成含有 CSS 字符串的