认识 Webpack | 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 15 天

课程重点：

1. webpack 是什么
2. 使用 webpack

课程知识点：

简单来说，webpack 就是一个用于构建前端项目的构建（打包）工具，webpack提供了丰富的接口和函数，通过引入不同的 loader 和 plugin（插件），来将各类独立的代码文件（ts/scss/less等）打包成一个整体。同时，webpack还支持很多丰富的特性来优化开发体验，例如hmr热更新开发服务器、sourcemap支持、tree-shaking支持等。

也能够将庞大的代码划分成一个个chunk，缩小单文件体积。在Webpack生态中，还有用于提供高级语法兼容的Babel，提供语法规范性检查的eslint等，可以说，webpack是前端工程化最为重要的一环。

Webpack 安装

npm i -D webpack webpack-cli

其中，参数 -D 代表将 webpack 安装为开发(development)依赖，接着，在根目录下创建 webpack.config.js 文件，这是webpack的配置文件，几乎所有配置都要在这里面完成。

对于 webpack 来说，一切都从入口文件entry开始，所以，首先要在配置中指定入口文件，有了入口，就需要出口。需要在配置中指定webpack打包产物的输出位置output

// webpack.config.js

const path = require("path");

module.exports = {
    entry: "./src/index",
    output: {
        filename: "[name].js",
        path: path.join(__dirname, "./dist")
    }
}

上面的配置中，指定了 src 目录下的 index.js 为入口文件，这样只要在 index.js 内引入不同的文件，webpack就能自动关联并打包成一个整体。指定了 output 为 dist 目录，那么 webpack 会将打包产物输出到 dist 目录

加载 loader

为了能够引入不同的文件类型，webpack设计了loader这一概念。顾名思义，loader就是用来加载不同文件的加载器，想要加载哪些文件，就需要安装对应的loader。

例如，现在 src 目录下有入口文件 index.js 和一个css文件 style.css

// index.js

const styles = require("./style.css");

为了让入口文件 index.js 能够载入 css，需要安装 loader css-loader 和 style-loader

npm add -D css-loader style-loader

同时，需要将他们加入到 webpack 的module配置字段中

// webpack.config.js

const path = require("path");

module.exports = {
    entry: "./src/index",
    output: {
        filename: "[name].js",
        path: path.join(__dirname, "./dist")
    },
    module: {
        rules: [{
            test: /\.css/i,
            use: [
                "style-loader",
                "css-loader"
            ]
        }]
    }
}

这样，webpack就会将 css 解析并打包到js中

babel

babel 和 webpack 实际上是两个项目，但是babel为webpack写了一个loader。

npm i -D @babel/core @babel/preset-env babel-loader

其中， @babel/core 是 babel 的核心库，@babel/preset-env是babel的预设（babel有许多不同环境的预设，用来满足不同的转译需求），babel-loader 就是 babel 在 webpack 下的loader了

// webpack.config.js

const path = require("path");

module.exports = {
    entry: "./src/index",
    output: {
        filename: "[name].js",
        path: path.join(__dirname, "./dist")
    },
    module: {
        rules: [{
            test: /\.js?$/,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: [
                        '@babel/preset-env'
                    ]
                }
            }]
        }]
    }
}

这样，webpack便会通过babel，将项目中那些兼容性欠佳的es6语法转换成大部分浏览器都能够运行的js代码了。