webpack创建初始化项目

最新推荐文章于 2025-07-11 16:02:57 发布

原创最新推荐文章于 2025-07-11 16:02:57 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

其他专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了如何使用webpack从头开始初始化项目，包括npm init、创建目录、安装webpack及webpack-dev-server，配置webpack.config.js文件，并实现实时打包。通过运行npm run dev启动本地服务，实现在localhost:8080上预览项目。同时，文章提到了解决webpack与webpack-cli版本不兼容的问题，以及如何将静态资源放入public目录以便被打包。

1、在项目根目录运行 npm init -y 命令快速初始化项目

2、在项目根目录创建 app 源代码目录和 public 产品目录

3、在public目录下创建index.html文件

4、使用npm安装webpack,webpack-cli, 执行如下命令即可

  npm i webpack webpack-cli -D

5、项目根目录下新建webpack.config.js文件，进行相关配置

var path = require('path');

module.exports = {
    entry: path.resolve(__dirname, 'app/main.js'),
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    }
};

6、执行命令 webpack 项目即进行webpack打包，会在dist目录下自动生成main.js文件，在src目录下index.html文件中引入该main.js文件即可生效

package.json

"scripts": {
  "test": "echo \\\\\\\"Error: no test specified\\\\\\\" && exit 1",
  "build": "webpack",
  "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base public"
},

初始化命令：npm run build （相当于运行命令行运行webpack）

然后会生成bundle.js文件

7、webpack-dev-server 实时打包

webpack-dev-server 打包好的main.js是托管到了内存中，所以在项目中有一个看不见的main.js

安装webpack-dev-server,执行如下命令

  npm i webpack-dev-server -D

在package.json文件中做如下配置

"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base public"

webpack.config.js 文件最终内容

{
  "name": "pixi",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "test": "echo \\\\\\\"Error: no test specified\\\\\\\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base public"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.37.1",
    "webpack-cli": "^3.3.12"
  },
  "dependencies": {
    "webpack-dev-server": "^3.11.2"
  }
}

这时再运行 npm run dev 即可在localhost:8080中访问到index.html的内容

注：这里的dev命令会把main.js 里面的内容打包到bundle.js 里面。然后搭建一个本地的 localhost:8080 服务然后就能访问index.html了

ps: 过程中可能会遇到报错。提示webpack和webpack-cli版本不兼容我这里用的webpack5版本+cli3版才行，之前的cli4版本不能和5使用

PS：如果需要将其他文件打入build文件夹里面，那么只需要将文件放到public文件夹里面就可以了，webpack会将public里面的文件打入到输出文件里面（默认，可以在上面的配置中修改目录）