webpack4、5+基础入门

最新推荐文章于 2024-06-14 16:58:44 发布

方方|灿歌

最新推荐文章于 2024-06-14 16:58:44 发布

阅读量199

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_46721670/article/details/127360749

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

新建项目

新建文件目录

目录结构如下

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

初始化package.json

npm init -y

本地安装 webpack 和 webpack-cli tips:默认安装是 5.x版本，只是在这个项目中安装webpack5不会影响电脑全局使用的webpack.

npm install -D webpack webpack-cli

Tip

在安装一个 package，而此 package 要打包到生产环境 bundle 中时，你应该使用 npm install --save。如果你在安装一个用于开发环境的 package 时（例如，linter, 测试库等），你应该使用 npm install --save-dev。更多信息请查看 npm 文档。

总结下命令：

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

使用webpack 打包

不配置文件，npx webpack
使用一个配置文件

不配置文件，按照以上的新建项目流程的目录结构可以直接使用 npx webapck 打包

可以这样说，执行 npx webpack，会将我们的脚本 src/index.js 作为入口起点，也会生成 dist/main.js 作为输出。Node 8.2/npm 5.2.0 以上版本提供的 npx 命令，可以运行在初次安装的 webpack package 中的 webpack 二进制文件（即 ./node_modules/.bin/webpack）：
 npx webpack
Tip

输出可能会稍有不同，但是只要构建成功，那么你就可以放心继续。

在浏览器中打开 dist 目录下的 index.html，如果一切正常，你应该能看到以下文本：'Hello webpack'。

使用一个配置文件,默认文件名 webpack.config.js

webpack.config.js

const path = require('path');

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

现在，让我们通过新的配置文件再次执行构建：

 npx webpack --config webpack.config.js

Tip

如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它。我们在这里使用 --config 选项只是向你表明，可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用的。

npm scripts

考虑到用 CLI 这种方式来运行本地的 webpack 副本并不是特别方便，我们可以设置一个快捷方式。调整 package.json 文件，添加一个 npm script：

{
  "name": "webpack5",
  "version": "1.0.0",
  "description": "",
  "private":true,
  "scripts": {
    "build": "webpack"
  },
  "author": "ff",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  }
}