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

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

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’，或‘’，会引起如下报错。

image.png

5.打包

在package.json中添加如下命令

image.png

 "build": "webpack"

现在在终端执行 npm run build 就可以生成打包文件了。执行完成后我们可以发现项目下新增了dist文件夹。

image.png

6.查看打包结果

打开index.html

image.png

可以看到我们在index.js中打印的foo.js已经打印在控制台中了。