webpack4基础安装与使用_安装 webpack 4-优快云博客

本文链接：https://blog.youkuaiyun.com/controllerha/article/details/82793185

本文详细介绍了如何使用Webpack进行项目构建，包括环境搭建、依赖安装、配置文件编写及常见loader使用等核心内容。

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

创建一个文件夹然后进去初始化

mkdir webpack-test

cd webpack-test/

npm init

安装webpack

npm install --save-dev webpack

安装webpack-cli

npm install --save-dev webpack-cli

安装 style-loader css-loader

用于支持css文件

npm install --save-dev style-loader css-loader

安装file-loader

用于支持图片

npm install --save-dev file-loader

创建需要的文件

1.webpack-test中创建src和dist文件夹,创建index.html和webpack.config.js文件

1.src文件夹中创建index.js文件，index.css文件,移入一张图片，我的是dog.jpg

目录结构

|- /webpack-demo
  |- /node_modules
  |- package.json
  |- webpack.config.js
  |- index.html
  |- /dist
  |- /src
      |- index.js
      |- index.css
      |- dog.jpg

介绍各个文件

1.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="dist/main.js"></script>
</body>
</html>

dist/main.js后面执行命令后会自己生成现在不用管写上就是

2.index.js

import './index.css';

var myspan = document.createElement('span');
var mydiv = document.createElement('div');

myspan.innerHTML = '我是span';
mydiv.classList.add('mydiv');

document.body.appendChild(myspan);
document.body.appendChild(mydiv);

上面引入了css文件,前面必须./不然后面会报错

3.index.css

.mydiv{
    width: 440px;
    height: 285px;
    border: 1px solid red;
    background: url("dog.jpg");
}

4.dog.jpg

5.配置 webpack.config.js（重要）

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath:'dist/'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
};

简单的说一下配置

entry:配置输入文件,所以我们上面创建了文件夹和文件

output

filename：配置输出文件名

path:输出文件路径，所以我们创建了dist文件夹用于输出

publicPath:'dist/' 用来指定静态资源发布地不然后面图片会找不到的

下面两个test中就是配置遇到css文件和图片怎么处理

6.配置package.json

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "style-loader": "^0.23.0",
    "webpack": "^4.19.1",
    "webpack-cli": "^3.1.0"
  }
}

里面加上了一句"build":"webpack"

这样就可以直接 npm run build执行构建命令

你也可以选择npx webpack --config webpack.config.js

执行命令

npm run build

有个警告，不想管它。。。

进入index.html

好了，没毛病，完成了基本的构建

最后来看看目录结构怎么样了

|- /webpack-demo
  |- /node_modules
  |- package.json
  |- webpack.config.js
  |- index.html
  |- /dist
      |- 9b813c11448cd599e7e8fdb1b316a9af.jpg
      |- main.js
  |- /src
      |- index.js
      |- index.css
      |- dog.jpg

多了个main.js和一个贼长一串的jpg图片（就是那个dog.jpg）