webpack4系列教程（二）：创建项目，打包第一个JS文件

waterc 发布于2019-08-23 14:40 / 1059人阅读

摘要：对于大多数项目，建议本地安装。打包第一个文件首先，我们在根目录下创建一个文件和一个文件夹。而中的属性，表示入口的名称，此处就是。接下来打开文件，来编写一条命令执行的打包。

1. 创建项目 1.1 初始化一个项目

首先安装nodejs，打开 nodeJs官网直接下载安装即可，安装完毕后打开命令行工具，进入你的项目文件夹，执行

npm init 进行项目的初始化：

过程中会让你填写项目名、版本、描述、仓库地址、关键字等信息，可以不填一路回车，执行完毕后会在根目录下创建一个 package.json 文件，这样就初始化结束了。

1.2 安装webpack

由于在webpack4中已经不再默认安装 webpacl-cli，所以我们要手动安装，在命令行执行 npm i webpack webpack-cli -D 即可。对于大多数项目，建议本地安装。这可以使我们在引入破坏式变更(breaking change)的依赖时，更容易分别升级项目。

2. 打包第一个JS文件

首先，我们在根目录下创建一个 webpack.config.js 文件和一个src文件夹。然后在src中创建一个 main.js 文件，如下：

在 main.js 中写一行

alert("hello world")

然后打开 webpack.config.js ，进行webpack的配置：

const path = require("path")

let config = {
  mode: "none",
  entry: {
    main: path.join(__dirname, "./src/main.js")
  },
  output: {
    filename: "[name].bundle.js",
    path: path.join(__dirname, "./dist")
  }
}

module.exports = config

我们设置了一个名为 main 的入口，并以 src 下的 main.js 作为入口文件，然后输出到根目录下的 dist 文件夹中。

在webpack4中，我们需要设置 mode 属性，用来决定当前是development还是production环境，webpack会根据此值来进行一些默认操作，两种环境的不同配置后面的博文会详解，这里我们设置为 "none" ，来避免默认操作。前文已经说过，path 是 nodeJs中的核心模块用来操作路径，__dirname 表示文件的当前路径（此时为根路径）。而 output中的filename属性，[name] 表示入口的名称，此处就是 main。

接下来打开 package.json 文件，来编写一条命令执行webpack的打包。在 script 中添加：

"build": "webpack --config webpack.config.js --progress --colors"

webpack --config path/to/your/file/file.js 表示执行某个配置文件，--progress可以让我们看到打包的进度， --colors 开启命令行颜色显示，更多的webpack命令参数大家可以另行查阅。

然后就可以在命令行执行：npm run build，执行完毕后，我们可以看到，在根目录下多了一个 dist 文件夹并有一个 main.bundle.js文件，这就是webpack为我们打包出来的静态资源，而文件路径就是我们在 output 中设置的值。

为了演示打包好的 main.bundle.js ，我们在根目录下创建一个 index.html ，并引入main.bundle.js




    
    Title

在浏览器中打开 index.html，可见main.js中的代码已经被执行了：

在IDE中打开main.bundle.js，代码的最底部可以看到我们在main.js中写的代码。

至此，我们的第一次 webpack 打包就成功了。

云服务器 GPU云服务器 java第一个小项目 java中第一个项目第一个php文件 webpack4教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100950.html

webpack4系列教程（十）：总结

摘要：传送门系列教程一初识系列教程二创建项目，打包第一个文件系列教程三自动生成项目中的文件系列教程四处理项目中的资源文件一系列教程五处理项目中的资源文件二系列教程六使用分割代码系列教程七使用系列教程八使用审查代码系列教程九开发环境和生产环境在前端开发日益复杂的今天，我们需要一个工具来帮助我们管理项目资源，打包、编译、预处理、后处理等等。webpack的出现无疑是前端开发者的福音，我的博文只...

hqman 2019-08-26 13:29 评论0 收藏0
webpack4系列教程（五）：处理项目中的资源文件（二）

摘要：首先安装在中引入并添加修改和的之后，可见中引入了一个文件也正是我们在和中的代码可以帮助我们处理，如自动添加浏览器前缀。在根目录下创建修改和的在中加入打包之后打开，可见浏览器前缀已经加上了 1. 在项目中使用 less 在 src/assets/ 下新建 common.less ： body{ background: #fafafa; padding: 20px; } show...

Channe 2019-08-23 14:42 评论0 收藏0
webpack-demos：全网最贴心webpack系列教程和配套代码

摘要：全网最贴心系列教程和配套代码欢迎关注个人技术博客。所以我花费了个多月整理了这份教程，一共分成节，每节都有讲解，并且准备了配套代码。奈何深感水平不够，只有一腔热情，所以直接开放了教程和源码。 webpack-demos：全网最贴心 webpack 系列教程和配套代码欢迎关注个人技术博客：godbmw.com。每周 1 篇原创技术分享！开源教程(webpack、设计模式）、面试刷题（偏前...

LMou 2019-08-23 12:25 评论0 收藏0
webpack4 系列教程(二): 编译 ES6

摘要：今天介绍怎么编译的各种函数和语法。对于相关的匹配规则，除了匹配结尾的文件，还应该去除文件夹下的第三库的文件发布前已经被处理好了。它需要在我们项目的入口文件中被引入，或者在中配置。个人网站原文链接系列教程二编译今天介绍webpack怎么编译ES6的各种函数和语法。敲黑板：这是webpack4版本哦, 有一些不同于webpack3的地方。 >>> 本节课源码 >>> 所有课程源码 1....

graf 2019-08-23 10:34 评论0 收藏0
webpack4 系列教程(一): 打包JS

摘要：本身就是为了打包所设计，作为第一节，介绍怎么打包。检验规范支持支持。创建文件夹，其中和分别用和规范编写。收尾打包后的文件会按照我们的配置放在目录下，这时，需要创建一个文件，引用打包好的文件。个人网站原文链接系列教程一打包 webpack 本身就是为了打包js所设计，作为第一节，介绍怎么打包js。 1. 检验webpack规范支持 webpack支持es6, CommonJS, AMD。...

chanthuang 2019-08-23 10:31 评论0 收藏0