webpack基础知识 2021-03-30

Webpack的定位

Webpack最初是为Node设计的一款打包工具，把一个Node代码打包成一个浏览器可用的代码。所以webpack是基于JS打包成一个js文件，再手动的在html文件里引用。Webpack可以帮助我们做多文件合并，在合并的过程中，调用各种各样的loader和plugin去控制合并的一些规则和对文本的一些转换。

安装

webpack 

webpack-cli：提供webpack命令 npm install -g webpack-cli

核心概念

entry（入口）

output（输出）

loader：loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用。

plugin（插件）：loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

mode （模式）： development、production、none

browser compatibility （浏览器兼容性）：不支持IE8及以下版本

environment （环境）：webpack5运行于Node.js v10.13.0+版本

示例

```

const HtmlWebpackPlugin=require('html-webpack-plugin');// 通过 npm 安装

const webpack=require('webpack');// 用于访问内置插件

module.exports={

    entry:'./path/to/my/entry/file.js',

    output:{

        path:path.resolve(__dirname,'dist'),

        filename:'my-first-webpack.bundle.js',

    },

    module:{

        rules:[

            {test:/\.txt$/,use:'raw-loader'}

        ],

    },

    plugins:[

        new HtmlWebpackPlugin({template:'./src/index.html'})

    ],

    mode:'production',

};

```