使用webpack 的配置文件

当我们使用 npx webpack index.js 进行打包时，其实使用的是webpack 的默认配置文件。

但是，为了实现更符合期望的配置，我们还得自己写配置文件。

下面，我们就开始写配置文件吧。

我们在项目根目录下，建一个文件叫“webpack.config.js”, 是webpack 默认的配置文件名

这个时候，运行代码 npx webpack

发现会报错 Entry module not found 意思是找不到入口文件

然后呢，我们呢可以在webpack.config.js 中配置一下。

当然，在配置前，我们要写一些模块代码。

index.html 代码

<!DOCTYPE html>
<html>
<head>
  <title>webpack</title>
  <meta charset="utf-8">
</head>
<body>
  <h>hello test webpack</h>
  <div id="root"></div>
  <script type="text/javascript" src="./index.js"></script>
</body>
</html>

index.js 代码

const Div1 = require("./DivOne.js");
const Div2 = require("./DivTwo.js");

new Div1();
new Div2();

DivOne.js 代码

function DivOne() {
  var dom = document.getElementById("root");
  var div = document.createElement("div");
  div.innerText = "你们好呀";
  dom.append(header);
}

module.exports = DivOne;

DivTwo.js 代码

function DivTwo() {
  var dom = document.getElementById("root");
  var div = document.createElement("div");
  div.innerText = "天气很好";
  dom.append(header);
}

module.exports = DivTwo

好啦。下面开始写 webpack.config.js 代码。

先使用module.exports扩起来 CommonJS 语法。

然后，再在 exports 里面写一些配置，这些配置项都是webpack 提供的配置接口。

“entry” 配置项，是指项目打包的入口，即从哪个文件开始打包

“output” 配置项，是指打包文件的出口，即把打包文件放哪儿。其中filename 就是打包后的文件名，path 是指放置的路径，这个路径必须是绝对路径。当使用绝对路径的时候必须引入node 的核心模块 “path”。

const path = require('path');

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

好啦，然后在项目目录下，使用命令 npx webpack

就可以打包啦，打包文件放在了 src/bundle 下面啦。

当然，如果不想用这个webpack.config.js 这个名字，也行。比如把它改成webpackconfig.js。

然后运行打包命令的时候，就需要这样写：

npx webpack --config webpackconfig.js

下一步，我们使用npm script 简化打包代码。

在使用vue react 的时候，我们打包的话，并没有使用到 npx webpack 这种命令，就是因为他们使用了npm script 将npx 代码封装了。

我们打开package.json 文件。如下。

{
  "name": "webpack-demo",
  "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.29.6",
    "webpack-cli": "^3.2.3"
  }
}

现在不需要“test” 命令，因此，把它删掉。

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "main": "index.js",
  "scripts": {
    "bundle": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  }
}

好啦。然后，我们只需要使用命令：

npm run bundle

就等价与之前的 “npx webpack” 命令了。

注意：当在“script” 标签下定义命令，它会先去node_modules 目录下找是否安装了webpack , 因此这个时候不需要 npx 命名。

还有一点，我们安装webpack 的时候，一起安装了webpack-cli。后者的作用呢，就是使我们可以在命令行中使用 webpack xxx.js , npx webpack这种webpack 命令。

使用webpack 的配置文件

猜你喜欢