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

时间 2019-12-07

标签 webpack4 webpack 系列教程建立项目打包第一个文件栏目 JavaScript 繁體版

原文原文链接

1. 建立项目

1.1 初始化一个项目

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

npm init 进行项目的初始化：html

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

1.2 安装webpack

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

2. 打包第一个JS文件

首先，咱们在根目录下建立一个 webpack.config.js 文件和一个src文件夹。而后在src中建立一个 main.js 文件，以下：webpack

在 main.js 中写一行 web

alert('hello world')

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

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 文件夹中。json

在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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="dist/main.bundle.js"></script>
</body>
</html>

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

在IDE中打开main.bundle.js，代码的最底部能够看到咱们在main.js中写的代码。

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