Webpack5.x-安装和配置教程

JudgFFF

已于 2022-01-23 21:52:47 修改

阅读量1.6k

点赞数 1

分类专栏：前端文章标签： webpack 前端

于 2022-01-19 10:52:01 首次发布

本文链接：https://blog.csdn.net/m0_43424197/article/details/122574268

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

安装

本地安装：

要安装最新版本或特定版本，请运行以下命令之一

npm install --save-dev webpack
# 或指定版本
npm install --save-dev webpack@<version>

Tip
是否使用 --save-dev 取决于你的应用场景。假设你仅使用 webpack 进行构建操作，那么建议你在安装时使用 --save-dev 选项，因为可能你不需要在生产环境上使用 webpack。如果需要应用于生产环境，请忽略 --save-dev 选项。

如果你使用 webpack v4+ 版本，并且想要在命令行中调用 webpack，你还需要安装 CLI

npm install --save-dev webpack-cli

全局安装：

通过 NPM 安装方式，使 webpack 在全局环境下可用

npm install --global webpack

Warning
不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。

体验版本：

使用以下命令安装 beta 版本，或者直接从 webpack 的仓库中安装

npm install --save-dev webpack@next
# 或特定的 tag/分支
npm install --save-dev webpack/webpack#<tagname/branchname>

Warning
安装这些最新体验版本时要小心！它们可能仍然包含 bug，因此不应该用于生产环境。

配置

基本安装：

创建一个目录，初始化 npm，在本地安装 webpack，接着安装 webpack-cli

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

创建以下目录结构、文件和内容

webpack-demo
|- package.json
|- package-lock.json
|- index.html
|- /src
  |- index.js

src/index.js

const sum = (m, n) => {
  return m + n
}

console.log(sum(10, 20))

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>起步</title>
    <script src="https://unpkg.com/lodash@4.17.20"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

package.json

 {
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "private": true,
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
     "build1": "npx webpack",
     "build2": "npx webpack --config webpack.config.js",
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "devDependencies": {
     "webpack": "^5.66.0",
     "webpack-cli": "^4.9.1"
   }
 }

打包生成文件

$ npm run build1
[webpack-cli] Compilation finished
asset main.js 69.3 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 1000 bytes 5 modules
cacheable modules 530 KiB
  ./src/index.js 257 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 1851 ms

使用一个配置文件：

project

webpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js
|- index.html
|- /src
  |- index.js

webpack.config.js

const path = require('path');

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

打包生成文件

$ npm run build2
[webpack-cli] Compilation finished
asset main.js 69.3 KiB [compared for emit] [minimized] (name: main) 1 related asset
runtime modules 1000 bytes 5 modules
cacheable modules 530 KiB
  ./src/index.js 257 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 1934 ms
Tip

如需了解更多配置内容，可进入官方文档

JudgFFF

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack5.x-安装和配置教程

安装前提条件在开始之前，请确保安装了 Node.js 的最新版本。使用 Node.js 最新的长期支持版本，是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能，或者缺少相关 package本地安装要安装最新版本或特定版本，请运行以下命令之一npm install --save-dev webpack# 或指定版本npm install --save-dev webpack@<version> Tip是否使用 --save-dev 取决
复制链接

扫一扫