webpack的使用（上）

在项目中安装和配置webpack、配置打包的入口与出口、配置webpack的自动打包功能、配置 html-webpack-plugin 生成预览页面、配置自动打包相关的参数等相关内容。

장숙혜

2233人浏览 · 2024-02-17 23:19:14

장숙혜 · 2024-02-17 23:19:14 发布

前言：在项目中安装和配置webpack、配置打包的入口与出口、配置webpack的自动打包功能、配置 html-webpack-plugin 生成预览页面、配置自动打包相关的参数等相关内容

一、了解webpack

1、概念

webpack 是一个流行的前端项目构建工具(打包工具)，可以解决当前web开发中所面临的困境。webpack 提供了友好的模块化支持，以及代码压缩混淆、处理、js兼容问题、性能优化等强大的功能。

2、创建列表隔行变色项目

（1）新建项目空白目录，并运行npm init -y命令，初始化包管理配置文件 package.json

npm init -y

（2）新建src 源代码目录
在这里插入图片描述
（3）新建src -> index.html首页

（4）初始化首页基本的结构
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="index.js"></script>
</head>
<body>
    <ul>
        <li>第1个li</li>
        <li>第2个li</li>
        <li>第3个li</li>
        <li>第4个li</li>
        <li>第5个li</li>
        <li>第6个li</li>
        <li>第7个li</li>
        <li>第8个li</li>
        <li>第9个li</li>
        <li>第10个li</li>
    </ul>
</body>
</html>

（5）运行npm install jquery -s命令，安装 jQuery

npm install jquery -s

（6）通过模块化的形式，实现列表隔行变色效果
index.js

import $ from "jquery"
$(function(){
    $('li:odd').css('backgroundColor',"pink")
    $('li:even').css('backgroundColor',"yellow")
})

会发现效果没有出现，控制台还报错在这里插入图片描述

报错原因：import $ from "jquery"这是ES6模块化语法，浏览器对这种语法支持的不是很好。解决方法是配置webpack

二、项目中安装和配置webpack

1、步骤

1）运行 npm install webpack webpack-cli -D 命令，安装 webpack 相关的包

npm install webpack webpack-cli -D

2）在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件
在这里插入图片描述
3）在 webpack 的配置文件中，初始化如下基本配置:

const path=require('path')
module.exports={
    // 编译模式
    mode:'development',  //development production
}

注意：在开发阶段，使用的development
4）在 package.json 配置文件中的 scripts 节点下，新增 dev 脚本如下:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"
  },

在这里插入图片描述
5）在终端中运行 npm run dev 命令，启动 webpack 进行项目打包
没有报错，有相关打包信息，并且运行index.html文件效果实现说明配置成功了。

三、配置打包的入口与出口

1、配置

webpack的4.x版本中默认约定：打包的入口文件为 src -> index.js；打包的输出文件为 dist ->main.js
要修改打包的入口与出口，可以在webpack.config.js 中新增如下配置信息：

const path=require('path')
module.exports={
    // 编译模式
    mode:'development',  //development production
    entry: path.join(__dirname,'./src/index.js'), //打包入口文件路径
    output:{
        path: path.join(__dirname,'./dist'), //输出文件的存放路径
        filename:'bundle.js' //输出文件的名称
    }
}

请添加图片描述

2、遇到问题

我遇到了两个报错：
GET http://127.0.0.1:5500/bundle.js net::ERR_ABORTED 404 (Not Found).
Refused to execute script from ‘http://127.0.0.1:5500/bundle.js’ because its MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled.
解决方法：webpack.config.js 中代码修改如下

const path=require('path')
module.exports={
    // 编译模式
    mode:'development',  //development production
    entry: path.join(__dirname,'./src/index.js'), //打包入口文件路径
    output:{
        path: path.join(__dirname,'./dist'), //输出文件的存放路径
        filename:'bundle.js' //输出文件的名称
    },
    //增加该内容，报错消除
     devServer: {
        static:{
            directory:path.join(__dirname,"/")
        }
    },
}

将 src->index.html 中，script脚本的引用路径，修改为

<script src="../dist/main.js"></script>

在这里插入图片描述
最终实现了创建列表隔行变色项目

四、配置webpack的自动打包功能

因为每次修改了内容，都要执行一次npm run dev打包，才能看到效果，所以配置webpack的自动打包功能比较方便。

1、步骤

1）运行 npm install webpack-dev-server -D 命令，安装支持项目自动打包的工具

npm install webpack-dev-server -D

2）修改 package.json ->scripts 中的 dev 命令修改如下：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },

在这里插入图片描述

3）将 src->index.html 中，script脚本的引用路径，修改为“/bundlejs”

    <script src="/bundle.js"></script>

在这里插入图片描述

4）运行 npm run dev命令，重新进行打包在浏览器中访问http://localhost:8080地址，查看自动打包效果，点击相应文件即可查看
在这里插入图片描述

注意：http://localhost:8080/bundle.js，可查看打包文件内容，但是在编辑器中看不见该文件，webpack-dev-server生成的bundle.js并没有放在物理磁盘上，而是默认放到了项目根目录中、放在了内存中，是一个虚拟的、看不见的。会启动一个实时打包的 http 服务器webpack-dev-server。

五、配置 html-webpack-plugin 生成预览页面

因为复制http://localhost:8080/到浏览器展示项目内容，再点击内容查看界面是比较麻烦的，所以我们配置 html-webpack-plugin 到要预览页面。
1）运行 npm install html-webpack-plugin -D 命令，安装生成预览页面的插件

 npm install html-webpack-plugin -D

2）修改 webpack.config.js 文件头部区域，添加如下配置信息：

//导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin=require("html-webpack-plugin")
const htmlePlguin=new HtmlWebpackPlugin({// 创建插件的实例对象
    template:'./src/index.html', // 指定要用到的模板文件
    filename: 'index.html' // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示
})

3）修改 webpack.config.js 文件中向外暴露的配置对象，新增如下配置节点：

const path=require('path')
const HtmlWebpackPlugin=require("html-webpack-plugin")
const htmlePlguin=new HtmlWebpackPlugin({
    template:'./src/index.html',
    filename: 'index.html'
})
module.exports={
    // 编译模式
    mode:'development', //development production
    entry: path.join(__dirname,'./src/index.js'), //打包入口文件路径
    output:{
        path: path.join(__dirname,'./dist'), //输出文件的存放路径
        filename:'bundle.js' //输出文件的名称
    },
    devServer: {
        static:{
            directory:path.join(__dirname,"/")
        }
    },
    plugins:[htmlePlguin]
}

这样http://localhost:8080/直接可以查看界面内容
在这里插入图片描述

六、配置自动打包相关的参数(自动打开浏览器，不需要手动粘贴复制)

webpack-dev-server --open 时，它会启动一个本地的开发服务器，并且自动在默认的浏览器中打开该服务器。 --host 配置 IP 地址， --port 配置端口
package.json

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

在这里插入图片描述
以上内容为webpack基本配置

科技创新，汇聚千年文化底蕴，共筑璀璨首都未来之梦！

欢迎加入北京社区

更多推荐

@天命人，这场大赛69万奖金等你来分！

北京城市开发者社区

❌ IllegalStateException：Method Has Been Invoked at an Illegal or Inappropriate Time 的完美解决方法 ❌

北京城市开发者社区

Job for nginx.service Failed: Nginx服务启动失败的完美解决方法

北京城市开发者社区

所有评论(0)

查看更多评论

장숙혜

@qq_53911056

已为社区贡献1条内容