一、基础篇：webpack与构建发展简史

# 一、基础篇：webpack 与构建发展简史

# 1 webpack

# 1.1 为什么需要构建工具

转换 ES6 语法
转换 JSX
CSS 前缀补全/预处理器
压缩混淆
图片压缩

-w433

# 1.2 前端构建演变之路

-w634

YUI: 2008 年 grunt: fis3: 百度（已不维护）

# 1.3 为什么选择 webpack

-w806

官网：https://webpack.js.org/ (opens new window)

社区生态丰富
配置灵活和插件化拓展
官方更新迭代速度快

# 2 初始 webpack

# 2.1 配置文件名称

webpack 默认配置文件： webpack.config.js 可以通过 webpack --config 指定配置文件

# 2.2 webpack 配置组成

module.exports = {
    entry: './src/index.js',                        // 打包的入口文件
    output: './dist/main.js',                       // 打包的输出
    mode: 'production',                             // 环境
    module: {
        rules: [                                    // Loader 配置
            { test: /\.txt$/, use: 'raw-loader' }
        ]
    },
    plugins: [                                      // 插件配置
        new HtmlwebpackPlugin({
            template: './src/index.html'
        })
    ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 2.3 零配置 webpack 包含哪些内容

module.exports = {
    entry: './src/index.js',                        // 指定默认的 entry 为： ./src/index.js
    output: './dist/main.js',                       // 指定默认的 output 为：./dist/main.js
    mode: 'production',
    module: {
        rules: [                                    // Loader 配置
            { test: /\.txt$/, use: 'raw-loader' }
        ]
    },
    plugins: [                                      // 插件配置
        new HtmlwebpackPlugin({
            template: './src/index.html'
        })
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 3 环境搭建

# 3.1 安装 Node.js 和 NPM

安装 nvm (https://github.com/nvm-sh/nvm (opens new window))
- 通过 curl 安装：curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
- 通过 wget 安装：wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
安装 Node.js 和 NPM
- nvm install v10.15.3
- 检查是否安装成功：node -v, npm -v

# 3.2 安装 webpack 和 webpack-cli

创建空目录和 package.json
- mkdir my-project
- cd my-project
- npm init -y(-y 默认选择 yes)
安装 webpack 和 webpack-cli
- npm install webpack webpack-cli --save-dev(--save-dev 依赖只会安装在 dev 里面)
- 检查是否安装成功：./node_modules/.bin/webpack -v

# 3.3 一个最简单的例子

-w1198

# 3.3 通过 npm script 运行 webpack

-w1176

#工程化 #webpack

上次更新: 2021/09/14, 13:59:36

← DOM树二、基础篇：webpack 基础用法→