如何从0开始利用webpack打包项目

2021-08-27 本文已影响0人若年

1.初始化

首先创建一个文件夹存放我们的项目代码

image.png

注意：文件夹名字不要使用关键字webpack哦，会造成报错

npm init -y

通过这个命令来初始化生成package.json文件

2.添加文件

foo.js

export default "foo";

index.js

// /* webpackChunkName: "foo"*/: 魔法字符串，设置打包后的chunk名
import(/* webpackChunkName: "foo" */ "./foo").then((foo) => {
    console.log(foo);
  });

index.html

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

3、安装webpack

   本地
npm install webpack webpack-cli --save-dev

全局
npm install webpack --global

安装完成后查看package.json 文件可以看到添加了如下代码

{
   ...
+  "devDependencies": {
+    "webpack": "^5.51.1",
+    "webpack-cli": "^4.8.0"
+  }
   ...
}

4.添加配置文件

新增webpack.config.js文件

image.png

webpack.config.js

const { resolve } = require('path');

module.exports = {
  mode: 'development', // 标识不同的环境，development 开发 | production 生产
  devtool: 'hidden-nosources-source-map',
  entry: './src/index.js', // 文件入口
  output: {
    path: resolve(__dirname, 'dist'), // 输出目录
    filename: '[name].bundle.js', // 输出文件名称
  }
}

需要注意的是devtool在webpack5的情况下不能设置为‘none’，或‘’，会引起如下报错。