webpack 4+学习（1）

最新推荐文章于 2020-03-12 13:37:00 发布

那后来怎样了

最新推荐文章于 2020-03-12 13:37:00 发布

阅读量218

点赞数

基本安装

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

npm init -y    //  -y 表示所有选项为默认
npm install webpack webpack-cli --save-dev

创建以下目录

  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

src/index.js

window.onload = function () {
    alert('Hello Webpack 4+')
}

调整 package.json 文件，移除 main 入口

{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
+  "private": true,
-  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0"
  }
}

调整下代码目录结构，将"源"代码（/src）从"分发"代码zh（/dist）中分离出来。"源"代码是用于书写和编辑的代码。"分发"代码是构建过程产生的代码最小化和优化后的"输出目录"，最终将在浏览器中加载

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

在安装一个要打包到生产环境的安装包时，应该使用 npm install --save，如果在安装一个用于开发环境的安装包时，应该使用 npm install --save-dev。

由于通过打包来合成脚本，重新修改 dist/index.html

  <!doctype html>
  <html>
   <head>
     <title>起步</title>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="main.js"></script>
   </body>
  </html>

执行 npx webpack，会将脚本作为入口起点，然后输出为 main.js。 Node 8.2+ 版本提供的 npx 命令，可以运行在初始安装的 webpack 包（package）的 webpack 二进制文件

使用配置文件

创建一个配置文件 => webpack.config.js

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

基本配置

const path = require('path');

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

Node.js path 模块提供了一些用于处理文件路径的小工具，我们可以通过以下方式引入该模块：
var path = require("path")
方法：

序号方法&描述
1
path.normalize(p)
规范化路径，注意'..' 和 '.'。
2
path.join([path1][, path2][, ...])
用于连接路径。该方法的主要用途在于，会正确使用当前系统的路径分隔符，Unix系统是"/"，Windows系统是"\"。
3 path.resolve([from ...], to)
将 to 参数解析为绝对路径。
4 path.isAbsolute(path)
判断参数 path 是否是绝对路径。
5
path.relative(from, to)
用于将相对路径转为绝对路径。
6 path.dirname(p)
返回路径中代表文件夹的部分，同 Unix 的dirname 命令类似。
7 path.basename(p[, ext])
返回路径中的最后一部分。同 Unix 命令 bashname 类似。
8
path.extname(p)
返回路径中文件的后缀名，即路径中最后一个'.'之后的部分。如果一个路径中并不包含'.'或该路径只包含一个'.' 且这个'.'为路径的第一个字符，则此命令返回空字符串。
9
path.parse(pathString)
返回路径字符串的对象。
10
path.format(pathObject)
从对象中返回路径字符串，和 path.parse 相反。

属性：

序号属性&描述
1
path.sep
平台的文件路径分隔符，'\\' 或 '/'。
2
path.delimiter
平台的分隔符, ; or ':'.
3
path.posix
提供上述 path 的方法，不过总是以 posix 兼容的方式交互。
4
path.win32
提供上述 path 的方法，不过总是以 win32 兼容的方式交互。
在 Node.js 中，__dirname 总是指向被执行 js 文件的绝对路径，所以当在 /d1/d2/myscript.js 文件中写了 __dirname ，它的值就是 /di/d2

通过新配置文件再次执行构建

npx webpack --config webpack.config.js

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

NPM 脚本

考虑到使用 CLI 这种方式运行本地的 webpack 不是特别方便，所以可以设置一个快捷方式。在 package.json 添加一个 npm 脚本

{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
+   "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0"
  },
  "dependencies": {
    "loadsh": "^1.0.1"
  }
}

现在，可以使用 npm run build 命令，来代替之前使用的 npx 命令