初识Webpack

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将会自动使用该配置文件。下面简单介绍配置文件中的一些基本参数。

入口（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。