创建基本的webpack4.x项目

最新推荐文章于 2025-08-17 13:02:36 发布

原创最新推荐文章于 2025-08-17 13:02:36 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #webpack

html 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍如何使用cnpm全局安装webpack及CLI，初始化项目并配置src和dist目录。讲解webpack4.x的约定大于配置理念，包括默认入口和输出路径，以及mode选项的使用。演示如何配置webpack-dev-server实现自动重新编译，以及html-webpack-plugin插件的集成，用于在内存中自动生成index页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建基本的webpack4.x项目

全局安装 cnpm i webpack webpack-cli -g
1. 如何安装 cnpm: 全局运行 npm i cnpm -g
在项目根目录运行 npm init 初始化项目
在项目根目录创建 src 源代码目录和dist产品目录
在 src 目录下创建 index.html,index.js
安装相关依赖

- cnpm i webpack webpack-cli webpack-dev-server html-webpacl-plugin -D

注意：webpack 4.x 提供了约定大于配置的概念；目的是为了尽量减少配置文件的体积；

- 默认约定了：
- 打包的入口是src -> index.js
- 打包的输出文件是dist -> main.js

- 4.x 中新增了 mode 选项(为必选项)，可选的值为：development 和 production;
- 新建 webpack.config.js 文件，输入module.exports = {mode: 'production',}

自动重新编译 webpack-dev-server 的使用：

- 在 package.json 中的 scripts 添加"dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"（里面的值可以自己设定）
- npm run dev

使用 html-webpack-plugin 插件：

- 在 webpack.config.js 中输入

// 导入在内存中自动生成 index 页面的插件
const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')

//创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin ({
  template: path.join(__dirname, './src/index.html'),  //源文件
  filename: 'index.html'  //生成的内存中首页的名称
});


module.exports = {
  //设置打包方式 development / production
  mode: 'development',
  plugins: [
    htmlPlugin
  ]
}

- 停止服务后，保存，然后 npm run dev