初识Webpack

佚名 6年前 (2019-05-04) 随笔 1651人围观抢沙发百度已收录

Webpack是什么

Webpack是前端开发中常用的一个开源的、跨平台的模块打包工具。它主要用来打包JavaScript文件，但是借助相应的插件，它也可以转换HTML和CSS文件，甚至是图片等资源。根据官方文档，其基本原理是利用模块间的依赖关系建立依赖图，并据此生成表示这些模块的静态资源。

安装

使用npm
npm install --save-dev webpack
使用yarn
yarn add webpack --dev

基本配置

从版本4.0.0后，Webpack不要求自定义一个配置文件，默认的打包入口文件为src/index，默认输出文件为dist/main.js。可查看GitHub上WebpackOptionsDefaulter.js源码：
this.set("entry", "./src");
以及下文即将提到的resolve参数中用于解析模块的文件名规则：
this.set("resolve.mainFiles", ["index"]);
由上述两行代码可知默认打包入口文件应该为项目根目录下src/index，同理，默认的输出目录也可以从上述源码中找到。
通常由于项目的需要，可以在根目录下创建一个webpack.config.js，Webpack将会自动使用该配置文件。下面简单介绍配置文件中的一些基本参数。

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

入口（entry）

入口起点（entry point）指示Webpack应该使用哪个模块作为构建其内部依赖图的起点。Webpack会找到依赖入口起点的模块和库。
默认值通常为./src/index.js，也可以使用entry属性指定一个或多个不同的入口起点，如下代码为实际项目中使用的单入口简写法：

module.exports = {
    entry: resolve('app/main.js')
};

其中resolve函数封装Node中path.join方法，如下./build/utils.js：
exports.resolve = (...arg) => path.join(__dirname, '..', ...arg)

输出（output）

输出（output）属性指示Webpack输出它所创建的bundle的位置以及文件命名规则。默认目录为dist,默认主文件名为dist/main.js，当然也可以设定output属性值以满足自己的项目需求。如下项目实际代码：

module.exports = {
    entry: resolve('app/main.js'),
    output: {
        //输出文件目录
        path: resolve('dist'),
        //静态资源引用地址，此处为'/'
        publicPath: config.publicPath,
        // 入口文件生产的js
        filename: config.noHash ? 'js/[name].js' : 'js/[name].[chunkhash].js',
        // 非入口文件生产的js
        chunkFilename: config.noHash ? 'js/[name].js' : 'js/[name].[chunkhash].js'
    }
}

其中config.noHash表示产生的资源是否需要hash值；由于项目中客户端和服务端存在不同的入口文件，此处filename和chunkFilename使用替换模板字符串输出文件名。

加载器（loader）

loader的作用是让Webpack可以处理除JavaScript和JSON类型外的其他文件，将它们转换为可供应用程序使用的有效模块，并添加到依赖图中。
需要在module.rules中定义规则，常用的两个属性为：test和use，如下代码：

module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            exclude: [resolve('node_modules')],
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                        '@babel/preset-env',
                        '@babel/preset-react',
                    ],
                    plugins: [
                        "@babel/plugin-transform-runtime",
                        ["@babel/plugin-proposal-class-properties", { "loose": false }],
                    ]
                 }
            }
        }
    ]
}

test属性值是匹配特定文件类型的正则表达式，在上述代码中use属性值指定babel-loder用来转译js和jsx文件，排除node_modules目录下的文件。

解析（resolve）

resolve参数定义Webpack查找模块的规则，可以将模块原导入路径映射为新的路径，或是根据提供的文件后缀去检索文件。如下代码：

resolve: {
    //设置路径别名
    alias: {
        '@': resolve('app'),
    },
    // 文件后缀自动补全
    extensions: ['.js', '.jsx'],
}

插件（plugin）

加载器（loader）用于转换某些类型的文件，而插件则可以执行范围更广的任务。使用插件的方法也很简单——安装对应插件的NPM包后引入该插件，在plugins数组添加该对象，如下代码所示：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
plugins: [
    new MiniCssExtractPlugin({
        filename: config.noHash ? 'css/[name].css' : 'css/[name].[chunkhash].css',
    })
],

上述MiniCssExtractPlugin插件的功能是为每一个包含CSS的JavaScript文件创建一个独立的CSS文件，支持按需加载CSS和SourceMap。