webpack的基本搭建_检查是否下载了webpack-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51110899/article/details/109744952

本文详细介绍了webpack的使用流程。包括下载安装webpack及webpack-cli，初始化package.json文件，创建文件并初次打包，配置打包命令，建立本地服务器解决高版本报错，配置sass，以及自动生成html页面等内容，帮助开发者快速上手webpack。

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

一、webpack的下载和安装。

使用webpack -v查看当前文环境是否具有webpack

如果没有执行以下安装命令

npm i webpack webpack-cli -g --save-dev

由于webpack4后的版本，命令迁移至webpack-cli，因此还需安装webpack-cli

二、初始化package.json文件

npm init -y

命令执行完毕文件夹中会出现一个package.json文件，里面是一些版本号插件。

三、创建文件并进行初次打包

1.创建一个src文件夹
2.在src下创建一个index.html
并引入一个还未存在的bundle.js文件（打包之后的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>Document</title>
</head>
<body>
    <div id="box"></div>
    <script src="bundle.js"></script>
</body>
</html>

3.在src下创建一个main.js文件
主要开发文件，名字可以自定义，可以在里面做一些Dom操作或者引入一些需要引入的js文件

let box = document.getElementById('box')
box.innerHTML="你好"
import $ from 'jquery'
$('#box').addClass('active')

4.打包

webpack src/main.js --output src/bundle.js

这时我们就可以看到我们前面引入的bundle.js文件，这个文件是一个打包之后出现的打包文件。
而这段打包命令会将main.js文件进行打包并创建一个bundle.js打包之后的文件。
这时候去打开index.html会发现main.js里的操作都实现了。

四、配置打包命令

这时每次的打包命令都会很长，并且做次修改都需要重新打包。
我可以做一些简单配置
创建一个webpack.config.js

 const path = require("path")
      module.exports = {
          entry:"./src/main.js",
          output:{
              filename:"bundle.js",
              path:path.resolve(__dirname,"dist")
          }
      }

这时运行webpack命令就可以进行打包

四、建立本地服务器

建立本地服务器之后不用我们每次都做一次打包操作。会自动给我们更新。
建立本地服务器

npm i webpack-dev-server -D

在package.json添加以下内容
“dev”: “webpack-dev-server --open --port 8888 --contentBase src --hot”

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 8888 --contentBase src --hot"
  },

npm run dev 运行
可能会有一些报错是因为webpack高版本的原因
解决报错

 cnpm i webpack@4.35.3 webpack-cli@3.3.5 -S

npm run dev 就可以正常运行了

五、配置sass

1.下载安装sass

 npm i node-sass sass-loader style-loader css-loader -D

2.在webpack.config.js 配置规则

 module: {
        rules: [
            //解析.scss文件,对于用 import 或 require 引入的sass文件进行加载，以及...声明的内部样式进行加载            
            {
              test: /\.scss$/,
              use:['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    }

六、自动生成html页面

1.下载依赖

cnpm i html-webpack-plugin -D

2.在webpack.config.js 配置规则

 plugins:[
          new htmlWebpackPlugin({
              filename:"index.html",
              template:path.join(__dirname,'index.html')
          })
      ],