Webpack基本配置及常用插件

原创

已于 2023-04-17 17:41:19 修改 · 置顶 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

于 2019-03-14 15:43:19 首次发布

本文详细介绍了一个初学者如何从零开始搭建Webpack环境，包括配置、常见插件使用及ES6、CSS、图片等资源的处理方法。

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

作为一位菜鸟前端，在学习的路上不能停下来，第一次学webpack的时候是一脸蒙蔽的，特别是在没有看网上的文字教程时直接看官方文档，根本无从下手，所以看了一些前辈们的教程之后自己写了个最基本的配置。

创建一个文件夹，叫webpackPratice
在这里插入图片描述
进入文件夹，打卡git，cnpm init，之后文件夹会自动生成package.json文件

创建两个文件夹，src和dist

进入src创建两个文件，index.html和index.js
进入dist创建一个文件，index.html
在根目录下创建一个配置文件，webpack.config.js

全局安装webpack
cnpm install webpack -g
在这里插入图片描述

此时目录结构如下图
在这里插入图片描述

在index.html和index.js随便写点东西，src和dist里的index.html都写一样的代码

index.html

<!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>Document</title>
</head>
<body>
    <div class="gunner"></div>
</body>
</html>

index.js

var gunner = document.getElementsByClassName('gunner')[0]
gunner.textContent = 'COME ON YOU GUNNER'

在webpack.config.js中添加如下配置

const path = require('path')

module.exports = {
   
   
    //设置模式
    mode: 'development',
    enrty: {
   
   
        //入口文件，设置为src文件夹下的index.js
        main: './src/index.js'
    },
    output: {
   
   
        //出口文件，将打包出来的文件放在dist文件夹下
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    }
}

在package.json文件的scripts里面添加一行配置"build" ：“webpack”

{
   
   
  "name": "webpackpractice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   
   
    "build"

最低0.47元/天解锁文章

200万优质内容无限畅学