webpack打包，webpack实现自动打包刷新

最新推荐文章于 2024-04-19 08:54:56 发布

慧钰鑫

最新推荐文章于 2024-04-19 08:54:56 发布

阅读量412

点赞数 8

文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/XXH3L/article/details/136432484

版权

项目结构

准备步骤：（webpack本质：node环境下的包）

1.首先初始化项目（终端运行命令），为了得到package.json

npm init -y

y就是yes，英文项目名就直接y就好了，带有中文的项目名，npm init 不要直接enter，要输入一个英文的项目名（像task，demo等等）

2.安装相应依赖包

安装操作命令如下：

npm install webpack -D

npm install webpack-cli -D

-D是项目局部安装，-g是全局安装

3.webpack配置

由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径。根据项目的代码结构，我们来写一下最基本的webpack配置：

webpack.config.js文件

//这个配置文件，其实就是一个JS文件，通过node中的模块操作，向外暴露了一个配置文件
// 导入处理路径的模块
var path = require("path");
// 导出一个配置对象
module.exports = {
    entry: path.join(__dirname, "./src/main.js"), // 项目入口文件，要使用webpack打包哪个文件
    output: { // 配置输出选项
        path: path.resolve(__dirname, "./dist"), // 配置输出的路径，指定输出到哪个目录中去
        filename: "bundle.js" // 配置输出的文件名
    },
    mode: "development" // 模式配置(开发环境模式) webpack3没有mode这个参数

};

手动配置入口文件和输出文件很麻烦，每改动一下代码看效果都要运行很长一段命令。

手动打包项目文件命令：

webpack3.0命令 webpack ./src/main.js ./dist/bundle.js

webpack4需要加 npx webpack ./src/main.js ./dist/bundle.js

webpack4.0以上版本更改了命令，要写成webpack ./src/main.js -o ./dist/bundle.js才是正确的

webpack实现自动打包刷新

不想每次都手动打包项目，可以给项目设置热启动，使用 webpack-dev-server 这个工具，来实现自动打包编译的功能。

需要添加依赖

npm install webpack-dev-server -D

还没完

在内存中根据指定的模板页面，生成一份存在内存中的首页，同时自动把打包好的bundle注入到页面底部，如果要配置插件，需要在导出的对象中，挂载一个plugins节点，这时候需要添加html-webpack-plugin插件

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

--save-dev局部安装的意思

然后需要在webpack.config.js添加plugins配置

//这个配置文件，其实就是一个JS文件，通过node中的模块操作，向外暴露了一个配置文件
// 导入处理路径的模块
var path = require("path");
//在内存中根据指定的模板页面，生成一份存在内存中的首页，同时自动把打包好的bundle注入到页面底部
//如果要配置插件，需要在导出的对象中，挂载一个plugins节点
var htmlWebpackPlugin = require("html-webpack-plugin")
    // 导出一个配置对象
module.exports = {
    entry: path.join(__dirname, "./src/main.js"), // 项目入口文件，要使用webpack打包哪个文件
    output: { // 配置输出选项
        path: path.resolve(__dirname, "./dist"), // 配置输出的路径，指定输出到哪个目录中去
        filename: "bundle.js" // 配置输出的文件名
    },
    plugins: [ //所有webpack插件的配置节点
        new htmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'), //指定模板文件路径
            filename: 'index.html' //设置生成的内存页面的名称
        })
    ],
    mode: "development", // 模式配置(开发环境模式) webpack3没有mode这个参数
    module: {}
};

在package.json文件中添加以下代码

终端运行npm run dev

就可以自动打包刷新

各个版本一定要相对应，不然后果很严重，报错会让你报到奔溃！！！！（此时的node是v20.11.1）

以下是测试过的版本，能行！！！（谁能知道我搞了多久吧，呜呜呜！！！）

其他文件代码

main.js代码如下：

//这个main.js是我们项目的JS入口文件

//1.导入jquery
//import *** from ***是ES6导入模块的方式
//由于ES6的代码太高级了，浏览器解析不了，所以，这一行会报错
import $ from 'jquery'

$(function() {
    $('li:odd').css('backgroundColor', 'blue')
    $('li:even').css('backgroundColor', function() {
        return '#' + 'D97634'
    })
})

main.js写法需要安装jquery

运行命令 npm i jquery -S

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>
    <!-- 注意：不推荐直接在这里引用任何包含css的文件 -->
</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>