Webpack 4 学习01（基础配置）

最新推荐文章于 2024-05-22 09:37:22 发布

weixin_34138521

最新推荐文章于 2024-05-22 09:37:22 发布

阅读量69

点赞数

文章标签： webpack json javascript ViewUI

原文链接：https://segmentfault.com/a/1190000018225016

版权

Webpack 4 学习（基础配置和js文件的打包）

一、安装配置

【前提】安装node.js环境
【官网下载】https://nodejs.org/zh-cn/
安装教程不赘述
创建项目文件夹
例如创建如下文件夹webpack_demo1
创建配置项
```
npm init -y
```
生成一个package.json文件如下图
全局安装webpack （不推荐，进行下一步操作）
```
npm install webpack -g
```

局部安装webpack(推荐)

npm install webpack --save-dev

另外，webpack 4要求安装包

npm install webpack-cli --save-dev

一起安装

npm install webpack webpack-cli --save-dev

以下表示安装成功

创建入口文件
```
./src/index.js
```
任意编写index.js文件内容用于测试

配置生产和开发模式

打开package.json文件添加如下脚本

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

现在运行：
```
npm run dev
```
生成dist/main.js ，其中 main.js 没有压缩

npm run dev 表示 开发模式
```
npm run build
```
此时的main.js 被压缩，这便是生产模式

接下来看看打包的js文件是否能够使用

创建index.html 引入打包好的main.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./main.js" charset="utf-8"></script>
</head>
<body>

</body>
</html>

打开浏览器调试

输出结果表示打包成功，大功告成！！！

【参考文献】 https://www.valentinog.com/bl...

weixin_34138521

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack 4 学习01（基础配置）

Webpack 4 学习（基础配置和js文件的打包）一、安装配置【前提】安装node.js环境【官网下载】https://nodejs.org/zh-cn/安装教程不赘述创建项目文件夹例如创建如下文件夹webpack_demo1创建配置项npm init -y生成一个package.json文件如下图全...
复制链接

扫一扫

Webpack 4 学习01（基础配置）

Webpack 4 学习（基础配置和js文件的打包）

一、安装配置

“相关推荐”对你有帮助么？