欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

使用webpack 的配置文件

程序员文章站 2022-07-12 20:03:07
...

当我们使用 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 命令。

上一篇： Pytorch学习之cuda

下一篇： CUDA编程（一）：QT中编写cuda代码

推荐阅读