从零开始搭建一个 Webpack 开发环境配置（附 Demo）

最新推荐文章于 2024-09-12 15:51:47 发布
最新推荐文章于 2024-09-12 15:51:47 发布
阅读量1.1k 收藏 2
点赞数 2
分类专栏： 前端开发 Webpack Webpack 文章标签： 前端开发 Webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zgd826237710/article/details/86747894
版权
本文详细介绍了如何从零开始搭建一个Webpack开发环境，包括创建配置文件、设置入口和输出、使用html-webpack-plugin和clean-webpack-plugin插件、配置Http服务、启用Source Map、配置模块解析规则、使用babel进行转换，并提供了完整的项目结构和代码示例。
摘要由CSDN通过智能技术生成

文章目录

本文使用 Webpack 从零开始搭建一个开发环境的脚手架配置，在此做个记录，也方便以后使用。

前言

我的上一篇文章简单介绍了一下 Webpack 的一些核心概念和基本配置，需要了解的朋友可以先参考一下:Webpack 的简单介绍

从 webpack v4.0.0 开始，可以不用引入一个配置文件。直接使用 webpack 命令就可进行打包。但是，一般我们需要进行更灵活的配置功能，所以本文我也创建一个 webpack 的配置文件，对 webpack 的一些属性进行配置。

本文 Demo 地址

环境搭建

项目结构

首先我们创建一个目录，初始化 npm，然后 在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：

$ mkdir webpack-dev-demo && cd webpack-dev-demo

$ npm init -y

$ npm install webpack webpack-cli --save-dev

project

  webpack-dev-demo
  |- package.json
  |- /public
    |- index.html
  |- /src
    |- index.js

src/index.js

function component() {
   
    var element = document.createElement('div');

    element.innerHTML = 'Hello World';
  
    return element;
}
  
document.body.appendChild(component());

public/index.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Webpack 开发环境配置</title>
</head>
<body>
    
</body>
</html>

package.json

{
   
  "name": "webpack-dev-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
   
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1"
  }
}

创建配置文件

在项目根目录下创建 webpack.config.js 配置文件

project

  webpack-dev-demo
  |- package.json
  |- /public
    |- index.html
  |- /src
    |- index.js
+ |- webpack.config.js

配置入口和输出

webpack.config.js

const path = require('path');

module.exports = {
   
    entry: './src/index.js',
    output: {
   
        filename: '[name]-[hash:8].js',
        path: path.resolve(__dirname, 'dist')
    }
}

运行 webpack

$ npm run build

控制台的打印结果
第一次打印结果

可以看到打印日志，打包成功了，但是此时在浏览器打开我们的 index.html 文件，却发现界面上什么都不显示，这个也好理解，因为 index.html 此时还没有引入任何的 js 文件。所以这个时候就要将打包后的文件引入到 index.html 文件中，但是可以看到 dist 文件夹下的 js 文件名有很多的 hash 值，而且每次编译都可能不同，怎么办呢？这时候就要引入 html-webpack-plugin 插件了

html-webpack-plugin 插件的使用

安装插件：

$ npm install html-webpack-plugin --save-dev

使用插件：

webpack.config.js

...
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   
    ...
    plugins: [
        new HTMLWebpack({
   
            // 用于生成的HTML文档的标题
            title: 'Webpack 开发环境配置',
            // webpack 生成模板的路径
            template: './public/index.html'
        })
    ]
}

关于 html-webpack-plugin 插件更多配置请参考：插件文档。

再次运行 webpack

$ npm run build

可以看到 dist 文件夹下生成了一个 index.html 文件，在浏览器中打开这个 index.html 文件，可以看到，‘Hello World’ 已经能够正常显示了

至此，项目能够正常打包了，但是还不够，此时可以看到 dist 文件夹下有两个 js 文件，但是明明只打了一个包啊。是因为另一个包使我们上一次操作打出来的，并没有删除掉。所以，为了避免 dist 文件夹中的文件变得杂乱，我们还需要引入 clean-webpack-plugin 插件帮助我们清理 dist 文件夹

clean-webpack-plugin 插件的使用

安装插件：

$ npm install clean-webpack-plugin --save-dev

用法：new CleanWebpackPlugin(paths [, {options}])

webpack.config.js

...
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
   
    ...
    plugins: [
        ...
最低0.47元/天 解锁文章
浮沉半生
关注
专栏目录
从0到1 Webpack搭建Vue3开发、生产环境
qq_43447509的博客
12-01 742
添加到每个文件导入的顶部 用于该文件中使用的、目标环境不支持的特性。如果执行第三个命名报如下错误 需要全局安装下touch-cli。替换core-js的导入 只导入目标环境模块所需的内容。可指定一个模板 打包后的js文件会自动引入。useBuiltIn属性默认false。webpack5内置 不需要再安装。需要安装corejs依赖。
使用 Webpack 进行生产环境配置（附 Demo）
浮沉半生的博客
02-15 448
本文从代码压缩、代码拆分、样式分离等三个方面对生产环境的代码进行了优化。只是最简单的一些配置，如果真正运用到项目中，还需要根据项目添加更多配置。 前言 本文讲述的是如何对生产环境下的代码进行压缩，如果还不是太了解 Webpack 的朋友，可以先看一下我的上一篇文章：从零开始搭建一个 Webpack 开发环境配置（附 Demo） 本文项目代码位置：源码地址 环境搭建 项目结构 首先编写一个项目，...
从零开始搭建一个基于Webpack的Vue开发环境
08-12
从零开始搭建一个基于Webpack的Vue开发环境
Webpack详细开发配置教程
最新发布
m0_74079648的博客
09-12 1369
我们在前面使用Vue2进行开发的时候通常都是使用我们的vue-ci四脚手架进行项目的搭建，ci脚手架中就是基于webpack进行构建打包，webpack作为代码编译工具，有入口、出口、loader和插件。
webpack开发环境配置
simple5960的博客
09-27 134
/* 开发环境配置：能让代码运行 运行项目指令： webpack 会将打包结果输出出去 npx webpack-dev-server 只会在内存中编译打包，没有输出 */ const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', outp
webpack打包1.0版本
weixin_49210760的博客
11-25 211
1.在项目的根目录中新建一个webpack.config.js 2.直接代码 /** * * * * 开发环境配置 */ // 这是内部自带的 const { reslove } =require('path') // 引入插件 const HtmlWebpackPlugin =require('html-webpack-plugin') module.exports = { // 入口文件 entry;'./src/index.js' // 输出文件的路径 output:{
从零搭建一个简单的webpack环境
weixin_33726318的博客
06-14 240
1、npm Init 2、创建webpack.config.js文件，并配置入口和出口 3、Package.json的script中配置命令对应的操作 4、安装webpack-dev-server 模块npm install webpack-dev-server -g 5、需要安装webpack 模块npm install webpack -g 6、需要安装webpack-...
从零开始：Webpack 4.x搭建前端开发环境详解
本文将详细介绍Webpack 4.x 的使用，重点讲解如何搭建前端开发环境。Webpack 是一款强大的模块打包工具，用于处理现代 JavaScript 应用程序的静态资源，支持转换各种预处理语言和最新 JavaScript 语法，并将其转化为...
webpack 开发环境的基本配置
wzg0817的博客
07-17 373
文章目录1. webpack 初体验1.1 初始化配置1.2 编译打包应用2. webpack 开发环境的基本配置2.1 创建配置文件2.2 打包样式资源2.3 打包 HTML资源2.4 打包图片资源2.5 打包其他资源2.6 devserver2.7 开发环境的配置 1. webpack 初体验 1.1 初始化配置 初始化 package.json 输入指令: npm init 下载并安装 webpack 输入指令: npm install webpack webpack-cli -g
webpack4配置demo
12-18
通过webpack4搭建开发环境，适合入门，笔记和搭建流程都在里面
webpack开发环境基本配置
MoonNight608的博客
12-22 168
开发环境配置文件 webpack.config.js 开发环境配置文件webpack.config.js 1、下载css-loader、style-loader、less-loader、less npm i css-loader style-loader less-loader less -D 2、打包html资源，下载html-webpack-plugin npm install --save-dev html-webpack-plugin 3、打包图片资源、下载图片html-loader、url-l
Webpack——简单地搭建一个 webpack 项目环境
五柳
01-12 373
引言 早期很多时候看 webpack，都是局限于看看基础的配置，例如 entry、ouput、rules 等等，自己着手配置也仅仅只是 less-loader 之类的。所以，作为前端求学者，从今天起，开始探索 webpack 奇妙的世界，有兴趣的同学可以一起坚持学习。 项目准备 初始化一个基础项目 npm init 创建最基础的几个文件用于后续构建使用 |-- node_module...
记录webpackDemo配置
usernotdefined的博客
06-21 179
记录个人webpack打包配置
一个完整版的 webpack 通用配置 demo
weixin_34010566的博客
01-19 368
Webpack 环境搭建
elie_yang的博客
05-26 1357
使用webpack搭建环境前，需要有前瞻知识：比如：关于webpack是什么，能做什么以及webpack是基于Node.js环境，对Node.js的安装也是前提条件。一图胜千言，下面直接一步一步 搭建环境，用图示方式说明： 当前实验的Node.js版本为： 步骤一：新建一个web项目：在本机磁盘新建一个文件夹：D:\tfs\web\gitTestProject 我这里使用vscode, ...
webpack环境搭建
weixin_43945122的博客
05-17 146
webpack环境搭建 一 webpack是什么 是一个模块化构建打包工具 vue，react 用的脚手架底层就是基于webpack搭建的 在公司主要用于公司内部搭建前端环境 掌握node webpack 可以说是晋升架构师的重要一环 学会webpack在vue脚手架也可以轻松的配置 构建工具除了webpack，还有grunt，gulp，rollup…… 二 webpack的使用 webpack中文文档：https://webpack.docschina.org/concepts/ 三 创建packa
搭建webpack环境
huasdl的博客
03-14 346
1、作为前端，想在互联网公司生存，最好熟悉基本的linix命令，因为互联网公司大部分是linix系统，熟悉linix基本命令能提高工作效率，例如： mkdir  文件夹名 ：创建文件夹 。2、查看电脑是否安装nodejs ，window+R ，在命令行里执行node -v ，npm -v 。3、安装webpack 和react     npm i webpack  webpack-dev-serv...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值