Webpack 初体验 - 01

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

今天开始进入webpack之旅，一起学习有关webpack相关的知识吧！

1. webpack 是什么

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

五个核心 1.1 Entry 入口。指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。入口可指定多个。

module.exports = {
    // 入口文件
    entry: './src/index.js'
}

1.2 Output 出口。output属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

const { resolve } = require('path')

module.exports = {
    // 输出位置
    output: {
        // 文件名
        filename: 'built.js',
        // __dirname nodejs的变量，代表当前文件目录绝对路径
        path: resolve(__dirname, 'build')
    }

1.3 Loader 让webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。

module.exports = {
    // loader配置
    module: {
        rules: [
            {
                // 匹配哪些文件
                test: /.css$/,
                // use 从右到左执行
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}

1.4 Plugins 插件。可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。比loader更加强大。

module.exports = {
    // plugins配置
    plugins: []
}

1.5 Mode 模式。指示 webpack 使用相应模式的配置。

• development 开发环境
• production 生产环境

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

上述五项基本配置，在项目的顶级目录中 存在于 webpack.config.js 中，

完整代码：

const { resolve } = require('path')

module.exports = {
    // 入口文件
    entry: './src/index.js',
    // 输出位置
    output: {
        filename: 'built.js',
        // __dirname nodejs的变量，代表当前文件目录绝对路径
        path: resolve(__dirname, 'build')
    },
    // loader配置
    module: {
        rules: [
            {
                // 匹配哪些文件
                test: /.css$/,
                // use 从右到左执行
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    // plugins配置
    plugins: [],
    // 模式 development 开发环境，production 生产环境
    mode: 'development'
}

2. webpack 初体验

2.1 初始化配置

初始化 package.json . 在命令行输入 npm init

2.2 下载安装 webpack

npm install webpack webpack-cli -g

不用担心如果以前安装过，在使用命令可升级到最新版本，可覆盖掉旧版本。

package.json 内容

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "css-loader": "^6.7.1",
    "style-loader": "^3.3.1"
  }
}

2.3 运行

在src目录下新建 index.js 文件后，运行 npm run build 查看控制台

3. Webpack 开发环境的基本配置

3.1 创建文件

webpack.config.js

3.2 配置文件

const { resolve } = require('path')

module.exports = {
    // 入口文件
    entry: './src/index.js',
    // 输出位置
    output: {
        filename: 'built.js',
        // __dirname nodejs的变量，代表当前文件目录绝对路径
        path: resolve(__dirname, 'build')
    },
    // loader配置
    module: {
        rules: [
            {
                // 匹配哪些文件
                test: /.css$/,
                // use 从右到左执行
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    // plugins配置
    plugins: [],
    // 模式 development 开发环境，production 生产环境
    mode: 'development'
}