webpack在nodejs中的基本使用(完整代码)

最新推荐文章于 2024-05-31 20:34:40 发布

闲散客

最新推荐文章于 2024-05-31 20:34:40 发布

阅读量1k

点赞数

分类专栏： webpack 前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_44295944/article/details/99751616

版权

前端同时被 2 个专栏收录

16 篇文章

订阅专栏

webpack

2 篇文章

订阅专栏

本文详细介绍了如何在Node.js环境中使用webpack进行JS、CSS和图片的打包过程。从创建多文件开始，到配置webpack.config.js，再到处理CSS和图片，最后通过运行服务查看打包结果。文中强调了在打包过程中修改路径的重要性，并提供了简化步骤以避免频繁重启服务。

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

webpack可以简单理解为前端打包工具，本文是实现js文件和css文件以及实现图片打包的完整过程。

总体结构如下图

首先创建两个js文件，如a.js和main.js,然后创建一个html页面如index.html

//a.js
export function add(a,b){  //export是es6模块化导出操作
 return a+b;
}

//main.js
import {add} from "./a.js";//es6模块化导入操作
console.log(add(1,3));

//index.html
<body>
<script src="main.js" type="module"></script>//type="module"是进行es6模块化的必写内容
</body>
//用服务器端打开index.html页面
日志上打印出  3 ,证明运行成功

然后进行js文件的打包

$ npm/cnpm/yarn init //进行初始化操作,当项目中出现package.json文件即初始化成功.
接下来进行webpack的安装，(接下来的所有操作将在yarn下进行)
$ yarn add webpack webpack-cli --save-dev  //webpack的安装
安装成功后在package.json文件中写入
{
  "name": "03-demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": { //写入的内容
    "dev": "webpack",
  },
  "dependencies": {}

然后进行创建一个新的js文件(webpack.config.js必须如此命名)

//webpack.config.js
module.exports={
    entry:"./main.js"
}
然后进行如下操作
$ npm run dev
项目中会出现一个dist文件夹，该文件夹下有一个打包好的main.js文件，main.js文件中既打包了自身内容也打包了其他导入的文件。
//用服务器端打开index.html页面
日志打印 3，运行成功

接下来进行css打包

//需要将css代码打包到js中
//项目目录下新建css文件夹
css文件夹下新建index.css文件
//main.html
<body>
<div class="box"></div>
<script src="main.js" type="module"></script>
</body>
//index.css
.box{
width:100px;
height:100px;
background:red;
}
//main.js
import {add,sub} from "./a.js";
import "./css/index.css" //添加内容
安装css打包工具
$ yarn add css-loader style-loader --save-dev
//webpack.config.js
const path=require("path");
module.exports={
    entry:"./main.js",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"index.bundle.js"  //dist文件夹下回出现一个index.bundle.js文件，该文件既打包了js也打包了css
    },
    module:{
        rules:[
            {test:/\.css$/,use:["style-loader","css-loader"]} 
        ]
   }
}
//index.html
<body>
<div class="box"></div>
<script src="dist/index.bundle.js" type="module"></script>
</body>
然后进行
$ npm run dev
//用服务器端打开index.html页面
 页面出现红色方框区域即运行成功

最后进行图片打包

//需要将图片打包到js中
//项目目录下新建images文件夹
images文件夹下放入图片
//main.html
<body>
<div class="box"></div>
<img src="images/图片名"></img>
<script src="dist/index.bundle.js" type="module"></script>
</body>
//main.js
import {add,sub} from "./a.js";
import "./css/index.css"
import "./images/f.jpg"
安装图片打包工具
$ yarn add file-loader url-loader --save-dev
//webpack.config.js
const path=require("path");
const htmlWebpackPlugin=require("html-webpack-plugin");
module.exports={
    entry:"./main.js",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"index.bundle.js"//dist文件夹下回出现一个index.bundle.js文件，该文件既打包了js也打包了css还有图片
    },
    module:{
         rules:[
             {test:/\.css$/,use:["style-loader","css-loader"]},
             {test:/\.(jpg|png|jpeg|gif)$/,use:"url-loader?limit=10240"} // ?limit=10240该代码表示如果图片大小超过10k则将图片打包后放在dist文件夹下，否则也和css一样打包到js中
         ]
    }
然后进行
$ npm run dev
//用服务器端打开index.html页面
 页面出现红色方框区域和图片即运行成功

为了简化我们在进行css和js打包后需要改变地址以及图片打包后需要对图片路径进行改变的操作，我们可以进行

//安装html-webpack-plugin插件
$ yarn add html-webpack-plugin --save-dev
//webpack.config.js
const path=require("path");
const htmlWebpackPlugin=require("html-webpack-plugin");//导入插件
module.exports={
    entry:"./main.js",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"index.bundle.js"
    },
    module:{
         rules:[
             {test:/\.css$/,use:["style-loader","css-loader"]},
             {test:/\.(jpg|png|jpeg|gif)$/,use:"url-loader?limit=10240"}
         ]
    },
    plugins:[
        new htmlWebpackPlugin({
            template:"./index.html"  //dist文件夹下会生成一个index.html文件，其中的路径和地址不用修改
        })
    ]
}
然后进行
$ npm run dev
//用服务器端打开index.html页面
 页面出现红色方框区域即运行成功

为简化重复打开服务端的操作，我们可以进行

//安装webpack-dev-server工具，该使用会将源代码保存到内存中去，即运行一次后，如果我们将dist文件删除仍然可以运行页面。
$ yarn add webpack-dev-server --save-dev
//修改package.json内容
"license": "MIT",
  "scripts": { //修改部分
    "dev": "webpack-dev-server",
    "build": "webpack"
  },
  "dependencies": {}
然后进行
$ npm run dev
接下来会出现如下图所示的内容