webpack教程：如何从头开始设置 webpack 5 本文已经过原作者TaniaRascia授权

本文已经过原作者 Tania Rascia 授权翻译。
webpack 对我来说曾经是一个怪物般存在一样，因为它有太多太多的配置项，相反，使用像create-react-app脚手架可以很轻松创建项目，所以有一段时间内，我会尽量避免使用 webpack ，因为它看起来既复杂又望而却步
如果你们不习惯从头开始设置 webpack 来使用Babel、TypeScript、Sass、React或Vue ，或者不知道为什么要使用 webpack ，那么这篇文章是你的最佳选择。就像所有的事情一样，一旦你深入学习，你会发现它并不是那么可怕，只有几个主要的概念需要学习掌握。
如果你是从 webpack 4 升级到 webpack 5 ，这里有一些注意事项:

webpack-dev-server命令现在换成webpack-serve
file-loader、raw-loader和url-loader不是必需的，可以使用内置的Asset Modules
节点 polyfill 不再可用，例如，如果遇到stream错误，则可以将stream-browserify包作为依赖项添加，并将{stream：'stream-browserify'}添加到webpack配置中的alias属性。

什么是 webpack？现在，大多数网站不再只是单单的由原生JS+纯HTML编写的，还涉及一些浏览器无法理解的语言，如果项目大，文件多，对应的体积就大。所以要压缩文件和翻译成所有浏览器都能理解的东西，这就是webpack的用武之地。
webpack 可以看做是模块打包器：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss ， TypeScript等），并将其打包为合适的格式以供浏览器使用。
对于开发， webpack 还提供了一个开发服务器，它可以在我们保存时动态地更新模块和样式。 vue create和create-response-app本质上都依赖于 webpack 。
webpac k可以做很多事情，本文只是帮助大家熟悉一些主要概念并进行一些手动的配置。
安装首先，创建一个目录webpack-tutorial ，相关命令如下：
mkdir webpack-tutorialcd webpack-tutorialnpm init -y// 创建默认的 package.json安装webpack和webpack-cli：
npm i -D webpack webpack-cli接着，创建目录 src ，并在其里面创建 index.js ，内容如下：
console.log('Interesting!')基本配置在项目的根目录中创建一个webpack.config.js 。
Entryentry是配置模块的入口，可抽象成输入， Webpack 执行构建的第一步将从入口开始搜寻及递归解析出所有入口依赖的模块。
entry 配置是必填的，若不填则将导致 Webpack 报错退出。这里，我们将src/index.js做为入口点。
const path = require('path')module.exports = {entry: {main: path.resolve(__dirname, './src/index.js'),},}Output配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置。这里指定输出的路径为 'dist'：
module.exports = {/* ... */output: {path: path.resolve(__dirname, './dist'),filename: '[name].bundle.js',},}现在，我们具有构建捆绑包所需的最低配置。在package.json中，我们可以创建一个运行webpack命令的构建脚本。
"scripts": {"build": "webpack"}现在可以运行它了:
npm run build

文章插图
现在在 dist 目录会生成一个 main.bundle.js 文件
插件webpack有一个插件接口，这使得它更加灵活。内部webpack代码和第三方扩展使用插件，有一些主要的方法几乎每个webpack项目都会用到。
HTML 模板文件目前，我们有一个随机的bundle文件，但它对我们还不是很有用。如果需要使用main.bundle.js ，就要借助 HTML页面来加载这个 JS 包作为脚本。我们希望HTML文件自动引入这个生成 js 文件，所以我们将使用html-webpack-plugin创建一个HTML模板。
安装一下：
npm i -D html-webpack-plugin在src文件夹中创建一个template.html文件，这里，我们自定义一个title ，内容如下：
src/template.html
创建配置的plugins属性，然后将插件，文件名添加到输出（index.html），并链接到将基于该模板的模板文件。

const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {/* ... */plugins: [new HtmlWebpackPlugin({title: 'webpack Boilerplate',template: path.resolve(__dirname, './src/template.html'), // template filefilename: 'index.html', // output file}),],}

现在再次运行构建，会看到dist文件夹现在包含一个index.html ，里面也自动引入了我们打包好的 js 文件。用浏览器打开 index.html ，会在控制台看到 Interesting! 。