MaoJiuBlog

主题

Have a clear structure

基本配置 ​

在开始使用 Webpack 之前，我们需要对 Webpack 的配置有一定的认识。

5 大核心概念 ​

1.entry（入口）

指示 Webpack 从哪个文件开始打包

2.output（输出）

指示 Webpack 打包完的文件输出到哪里去，如何命名等

3.loader（加载器）

webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析

4.plugins（插件）

扩展 Webpack 的功能

5.mode（模式）

主要由两种模式：

  • 开发模式：development
  • 生产模式：production

准备 Webpack 配置文件 ​

在项目根目录下新建文件：webpack.config.js

js
module.exports = {
  // 入口
  entry: '',
  // 输出
  output: {},
  // 加载器
  module: {
    rules: []
  },
  // 插件
  plugins: [],
  // 模式
  mode: ''
}

Webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范

修改配置文件 ​

1.配置文件

js
// Node.js的核心模块，专门用来处理文件路径
const path = require('path')

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: './src/main.js',
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, 'dist'),
    // filename: 输出文件名
    filename: 'main.js'
  },
  // 加载器
  module: {
    rules: []
  },
  // 插件
  plugins: [],
  // 模式
  mode: 'development' // 开发模式
}

2.运行指令

shell
npx webpack

此时功能和之前一样，也不能处理样式资源

小结 ​

Webpack 将来都通过 webpack.config.js 文件进行配置，来增强 Webpack 的功能

我们后面会以两个模式来分别搭建 Webpack 的配置，先进行开发模式，再完成生产模式