作者：Tania Rascia
译者：前端小智
起源：taniarascia
点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588... 上曾经收录，更多往期高赞文章的分类，也整顿了很多我的文档，和教程材料。欢送Star和欠缺，大家面试能够参照考点温习，心愿咱们一起有点货色。

最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。

github 地址：https://github.com/qq44924588...

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。

Entry

entry是配置模块的入口，可形象成输出，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

<!DOCTYPE html><html lang="en">  <head>    <title><%= htmlWebpackPlugin.options.title %></title>  </head>  <body>    <div id="root"></div>  </body></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 file      filename: 'index.html', // output file    }),  ],}

当初再次运行构建，会看到dist文件夹当初蕴含一个index.html，外面也主动引入了咱们打包好的 js 文件。用浏览器关上 index.html，会在控制台看到 Interesting!。

接着，在index.js中咱们动静插入一些 dom 元素到页面中，内容如下：

// Create heading nodeconst heading = document.createElement('h1')heading.textContent = 'Interesting!'// Append heading node to the DOMconst app = document.querySelector('#root')app.append(heading)

从新构建，在进入 dist 目录上面，用 http-server 运行 html 文件。

http-server

能够在页面上看到，咱们注入的 "Interesting!"，还会留神到捆绑文件已放大。

留神:在装置HtmlWebpackPlugin后，你会看到一个DeprecationWarning，因为插件在降级到webpack 5后还没有齐全解脱deprecation正告。

Clean

咱们还须要设置clean-webpack-plugin,在每次构建后革除dist文件夹中的所有内容。 这对于确保不遗留任何旧数据很重要。

clean-webpack-plugin-删除/清理构建文件夹

const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const {CleanWebpackPlugin} = require('clean-webpack-plugin')module.exports = {  /* ... */  plugins: [    /* ... */    new CleanWebpackPlugin(),  ],}

Modules and Loaders

webpack 应用 loader 预处理一些加载的文件，如 js 文件、动态资源(如图像和CSS款式)和编译器(如TypeScript和Babel)。webpack 5也有一些内置的资产加载器。

在咱们的我的项目中，有一个HTML文件，该文件能够加载并引入一些 JS ，但实际上并没有执行任何操作。 那么这个webpack配置要做的次要事件是什么？

  • 将 JS 编译为浏览器能够了解的版本
  • 导入款式并将 SCSS 编译为 CSS
  • 导入图像和字体
  • （可选）设置React或Vue

Babel (JavaScript)

Babel是一个工具，可让应用最新的 JS 语法。

建设一个规定来查看我的项目中（node_modules之外）的任何.js文件，并应用babel-loader进行转换。 Babel 还有一些其余的依赖项：

  • babel-loader-应用 Babel 和 webpack 传输文件。
  • @babel/core-将ES2015+ 转换为向后兼容的 JavaScript
  • @babel/preset-env-Babel 的智能默认设置
  • @babel/plugin-proposal-class-properties-自定义 Babel 配置的示例（间接在类上应用属性）
npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-env @babel/plugin-proposal-class-properties

webpack.config.js

module.exports = {  /* ... */  module: {    rules: [      // JavaScript      {        test: /\.js$/,        exclude: /node_modules/,        use: ['babel-loader'],      },    ],  },}
如果是 TypeScript 我的项目，应用的是typescript-loader而不是babel-loader。

当初Babel曾经设置好了，然而咱们的Babel插件还没有。能够在index.js中增加一些新的语法来证实它还不能失常工作。

// 创立没有构造函数的类属性class Game {  name = 'Violin Charades'}const myGame = new Game()// 创立 p 节点const p = document.createElement('p')p.textContent = `I like ${myGame.name}.`const heading = document.createElement('h1')heading.textContent = 'Interesting!'const app = document.querySelector('#root')app.append(heading, p)

要解决这个问题，只需在我的项目的根目录中创立一个.babelrc文件。能够应用preset-env和plugin-proposal-class-properties增加更多默认值。

{  "presets": ["@babel/preset-env"],  "plugins": ["@babel/plugin-proposal-class-properties"]}

当初运行npm run build 所有准备就绪。

Images

假如咱们须要援用一张图片并间接导入到 JS 文件中，这样是无奈失常工作的。 为了演示，创立 src/ images 并向其中增加图像，而后尝试将其导入到index.js文件中。

src/index.js

import example from './images/example.png'/* ... */

运行构建时，再次看到谬误：

webpack有一些内置的asset modules ，可用于动态资源。 对于图像类型，咱们将应用asset/resource,留神，这里是一个type，而不是loader。

webpack.config.js

module.exports = {  /* ... */  module: {    rules: [      // Images      {        test: /\.(?:ico|gif|png|jpg|jpeg)$/i,        type: 'asset/resource',      },    ],  },}

构建后，能够在dist文件夹查看。

字体和内联

webpack 还有一个asset module ，能够应用asset/inline内联某些数据，例如svgs和字体。

src/index.js

import example from './images/example.svg'/* ... */

webpack.config.js

module.exports = {  /* ... */  module: {    rules: [      // Fonts and SVGs      {        test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,        type: 'asset/inline',      },    ],  },}

Styles

同样的须要应用 style loader能力在脚本中执行相似import 'file.css'的操作。

当初很多人都在应用CSS-in-JS、styled-components和其余工具来将款式引入到他们的 JS 应用程序中。

当网站只有一个 CSS 文件，仅可能加载一个CSS文件就足够了。但如果想应用PostCSS，为了能在任何浏览器中应用所有最新的CSS个性。或者想应用Sass, CSS预处理器，那就须要应用其它的 loader 解决。

我想应用这三种办法——在Sass中编写，在PostCSS中解决，以及编译到CSS。这须要引入一些加载器和依赖项。

  • sass-loader — 加载 SCSS 并编译为CSS
  • node-sass — Node Sass
  • postcss-loader — 应用 PostCSS 解决 CSS
  • css-loader — 解析 css import
  • style-loader —— 将CSS注入到DOM中
npm i -D sass-loader postcss-loader css-loader style-loader postcss-preset-env node-sass

就像Babel一样，PostCSS 也须要一个配置文件 postcss.config.js，在根目录中创立它，并输出以下内容：

postcss.config.js

module.exports = {  plugins: {    'postcss-preset-env': {      browsers: 'last 2 versions',    },  },}

为了测试 Sass 和 PostCSS 是否失常工作，创立 src/styles/main.scss，并输出以下内容：

src/styles/main.scss

$font-size: 1rem;$font-color: lch(53 105 40);html {  font-size: $font-size;  color: $font-color;}

当初，将文件导入index.js并增加四个 loader 。 它们从最初编译到第一个，因而列表中最初一个是sass-loader，因为须要编译，而后是PostCSS，而后是CSS，最初是style-loader，它将CSS注入到DOM 中。

src/index.js

import './styles/main.scss'/* ... */

webpack.config.js

module.exports = {  /* ... */  module: {    rules: [      // CSS, PostCSS, and Sass      {        test: /\.(scss|css)$/,        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],      },    ],  },}

当初，从新构建时，我的项目中曾经利用了Sass和PostCSS。

开发

每次进行更新时都要运行npm run build，站点越大，构建所需的工夫就越长，这样就非常的繁缛。 为此能够为 webpack 设置两种配置：

  • 生产配置，用于最小化，优化和删除所有源映射
  • 开发配置，该配置在服务器中运行webpack，每次更改都会更新，并具备源映射

开发模式下是在内存中运行所有内容，而不是构建一个dist文件，须要装置 webpack-dev-server

npm i -D webpack-dev-server

出于演示目标，咱们能够仅将开发配置增加到正在构建的以后webpack.config.js文件中并对其进行测试。 然而，咱们开发个别要创立两个配置文件：一个生产环境用的 mode: production，一个开发环境用的mode: development。

const webpack = require('webpack')module.exports =  {  /* ... */  mode: 'development',  devServer: {    historyApiFallback: true,    contentBase: path.resolve(__dirname, './dist'),    open: true,    compress: true,    hot: true,    port: 8080,  },  plugins: [    /* ... */    // Only update what has changed on hot reload    new webpack.HotModuleReplacementPlugin(),  ],})

咱们增加mode: development，并创立devServer属性，其中，默认端口将为8080，主动关上浏览器窗口，并应用hot-module-placement，这须要webpack.HotModuleReplacementPlugin插件。 这样模块执行更新而无需齐全从新加载页面-因而，如果你更新某些款式，则这些款式将发生变化，并且不必从新加载整个 JS ，大大放慢了开发速度。

当初，能够应用webpack serve命令来启动我的项目。

package.json

"scripts": {  "start": "webpack serve"}
npm start

运行此命令时，将在浏览器中自动弹出一个指向localhost：8080的链接。 当初，您能够更新Sass和JavaScript，并观看其动静更新。

总结

我用 Babel，Sass，PostCSS，生产优化和开发服务器创立了可用于生产的webpack 5样板，其中蕴含本文的所有内容，但会波及更多细节。 从这里，能够轻松设置React，Vue，Typescript或其余任何您想要的货色。

我的项目地址：webpack 5 boilerplate

看看它，摆弄它，享受它！

原文：https://www.taniarascia.com/h...

代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

交换

文章每周继续更新，能够微信搜寻「 大迁世界 」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送Star和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复福利，即可看到福利，你懂的。