关于javascript:webpack教程如何从头开始设置-webpack-5

4次阅读

共计 7973 个字符，预计需要花费 20 分钟才能阅读完成。

作者：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 属性。

当初，大多数网站不再只是单单的由原生 JS+ 纯 HTML 编写的，还波及一些浏览器无奈了解的语言，如果我的项目大，文件多，对应的体积就大。所以要压缩文件和翻译成所有浏览器都能了解的货色，这就是 webpack 的用武之地。

webpack 能够看做是模块打包器：它做的事件是，剖析你的我的项目构造，找到 JavaScript 模块以及其它的一些浏览器不能间接运行的拓展语言（Scss，TypeScript 等），并将其打包为适合的格局以供浏览器应用。

对于开发，webpack 还提供了一个开发服务器，它能够在咱们保留时动静地更新模块和款式。vue create和 create-response-app 实质上都依赖于 webpack。

webpac k 能够做很多事件，本文只是帮忙大家相熟一些次要概念并进行一些手动的配置。

首先，创立一个目录webpack-tutorial，相干命令如下：

mkdir webpack-tutorial
cd webpack-tutorial
npm init -y  // 创立默认的 package.json

装置 webpack 和webpack-cli：

npm i -D webpack webpack-cli

接着，创立目录 src，并在其外面创立 index.js，内容如下：

console.log('Interesting!')

在我的项目的根目录中创立一个webpack.config.js。

entry是配置模块的入口，可形象成输出，Webpack 执行构建的第一步将从入口开始搜查及递归解析出所有入口依赖的模块。

entry 配置是必填的，若不填则将导致 Webpack 报错退出。这里，咱们将 src/index.js 做为入口点。

const path = require('path')

module.exports = {
  entry: {main: path.resolve(__dirname, './src/index.js'),
  },
}

配置 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 我的项目都会用到。

目前，咱们有一个随机的 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 node
const heading = document.createElement('h1')
heading.textContent = 'Interesting!'

// Append heading node to the DOM
const app = document.querySelector('#root')
app.append(heading)

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

http-server

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

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

咱们还须要设置 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(),],
}

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

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

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

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 所有准备就绪。

假如咱们须要援用一张图片并间接导入到 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',
      },
    ],
  },
}

同样的须要应用 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 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复福利，即可看到福利，你懂的。

正文完

javascript

发表至： javascript

2020-11-18

0

关于javascript:reactrouter官网demo解析3嵌套路由

关于javascript:TypeScript-基础理论

关于javascript:浅入浅出前端监控系统落地

关于javascript:2021年前端知识点提炼八月份

关于java8:Java中NullPointerException的完美解决方案

关于javascript:webpack教程如何从头开始设置-webpack-5

什么是 webpack？

装置

根本配置

Entry

Output

插件

HTML 模板文件

Clean

Modules and Loaders

Babel (JavaScript)

Images

字体和内联

Styles

开发

总结

交换

站内搜索