webpack4安装使用

发表于 | 分类于

    官网手册为https://webpack.js.org/guides/getting-started/，但是在最后一步会出现npx webpack可能会出现错误，官网说是npx是在node 8.2或更高版本才行，但我的已经是v8.11.3。

其中dist为最终文件输出目录，src为需要编译打包的源文件；

  1. webpack安装：
    webpack安装分两种模式：

    • 全局安装
      1
      2
      npm install --global webpack
      npm install --global webpack-cli

    上面主要安装了webpakc基础库和webpack控制台（主要作用是命令行处理），通过上面那安装后在终端
    运行webpack -v会显示webpack版本号，如果没有安装webpack-cli，此时会有提示让安装webpack-cli或者webpack-command两个中的一个,如果两个都安装了此时会提示：

    1
    You have installed webpack-cli and webpack-command together. To work with the "webpack" command you need only one CLI package, please remove one of them or use them directly via their binary.

此时需要移除其中一个即可，执行npm remove webpack-cli 或者 npm remove webpack-command移除当前项目的， 全局的话使用npm remove –global webpack-cli。

  • 安装到你的项目目录：
    1
    npm install webpack --save-dev

!!! 全局安装了webpack后在npm脚本配置时，需要在当前目录安装npm install –save-dev webpack-command，否则会报错误显示找不到webpack的module。

  1. 项目包结构：
    包结构
    其中dist为webpack 默认 的打包后最终输出的文件所在目录，src为webpack 默认 的编写的js所在目录，main.js为webpack将src下的js打包集成的 默认 文件。
    此时package.json中的依赖应该是：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    {
      "name": "webpack",
      "version": "1.0.0",
      "description": "",
      "private": true,
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "dependencies": {
        "lodash": "^4.17.10"
      },
      "devDependencies": {
        "webpack": "^4.12.0",
        "webpack-command": "^0.2.1",
        "webpack-dev-server": "^2.9.7"
      }
    }

  2. webpack配置：
    webpack配置的文件名称 默认 为：webpack.config.js

    1
    2
    3
    4
    5
    6
    7
    module.exports = {
        entry:  "./src/index.js", //入口文件,使用相对路径
        output: {
          path: __dirname + "/dist",   //打包后的文件存放的地方，使用绝对路径
          filename: "bundle.js"   //打包后输出文件的文件名
        }
      }

此时打包命令为：webpack –config webpack.config.js，也可以不加config参数。

  1. npm脚本化：
    通过npm实现打包编译则需要对package.json文件处理：主要是在scripts下添加build属性：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"   //脚本化的命令和执行者
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.0.1",
    "webpack-cli": "^2.0.9",
    "lodash": "^4.17.5"
  }
}

最后打包命令则为 npm run build。

参考地址：
[1]. 官网 https://webpack.js.org/guides/getting-started/
[2]. webpack入门 https://segmentfault.com/a/1190000006178770