随笔 - 633,  文章 - 0,  评论 - 13,  阅读 - 48万
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
webpack的安装与使用

1.安装：

npm install webpack webpack-cli -g

 2.使用

复制代码
1.新建项目目录"mywebpack"
2.在项目目录下新建文件夹“modules”
3.在modules文件夹下新建main.js
4.main.js的内容：

var hello=require("./hello")
hello.sayHi();

5.在modules文件夹下新建一个模块“hello.js”
6.hello.js内容：

//通过exports将模块暴露出来
exports.sayHi=function () {
    document.write("<div>hello webpack</div>")
}

7.在webpack中，一个js就是一个模块
8.在“hello.js”中通过exports来导出sayHi，在main.js中通过require("./hello")来导入hello.js，并通过hello.sayHi();来使用
复制代码

 3.在webpack的配置

复制代码
1.在项目目录“mywebpack”目录下新建一个webpack.config.js
2.webpack.config.js内容：

module.exports={
    entry:"./modules/main.js",   //放main.js路径
    //output，为打包完成后，输出的一个内容
    output:{
        filename:"./js/bundle.js"  //打包的时候，就会把main.js模块和hello.js模块，打包成bundle.js模块
    },
    //module，处理各种类型的文件
    module:{
        loaders:[
            {test:/\.js$/,loader:""}
        ]
    },
    //plugins为插件，代码重用
    plugins:{},
    //resolve，路径的指向
    resolve:{},
    watch:false
}
复制代码

4.打包

1.在cmd中进入到项目目录下：
d:
cd 项目目录

2.直接在cmd中输入：webpack     # 打包命令即可完成打包

5.打包报错：

复制代码
[webpack-cli] TypeError: item.plugins.unshift is not a function
    at internalBuildConfig (D:\nodejs\node_global\node_modules\webpack-cli\lib\webpack-cli.js:1762:26)
    at runFunctionOnEachConfig (D:\nodejs\node_global\node_modules\webpack-cli\lib\webpack-cli.js:1572:27)
    at WebpackCLI.buildConfig (D:\nodejs\node_global\node_modules\webpack-cli\lib\webpack-cli.js:1772:9)
    at async WebpackCLI.createCompiler (D:\nodejs\node_global\node_modules\webpack-cli\lib\webpack-cli.js:1786:18)
    at async WebpackCLI.runWebpack (D:\nodejs\node_global\node_modules\webpack-cli\lib\webpack-cli.js:1890:20)
    at async Command.<anonymous> (D:\nodejs\node_global\node_modules\webpack-cli\lib\webpack-cli.js:912:21)
    at async Promise.all (index 1)
    at async Command.<anonymous> (D:\nodejs\node_global\node_modules\webpack-cli\lib\webpack-cli.js:1372:13)
复制代码

6.解决：

复制代码
1.将webpack.config.js中的    注释掉其他，只留下enrty和output的内容,
2.webpack.config.js:


module.exports={
    entry:"./modules/main.js",   //放main.js路径
    //output，为打包完成后，输出的一个内容
    output:{
        filename:"./js/bundle.js"  //打包的时候，就会把main.js模块和hello.js模块，打包成bundle.js模块
    },
    // //module，处理各种类型的文件
    // module:{
    //     loaders:[
    //         {test:/\.js$/,loader:""}
    //     ]
    // },
    //plugins为插件，代码重用
    // plugins:{},
    //resolve，路径的指向
    // resolve:{},
    watch:false
}
3.重新使用命令打包：webpack
复制代码

 

 

7.打包成功

1.可以看到在项目目录mywebpack下生成一个dist文件夹
2.其下有js文件夹
3.其下有bundle.js

8.dist就是打包完成后自动生成的目录

9.看打包后的效果

复制代码
1.在项目目录mywebpack文件夹下创建index.html
2.index.html内容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--直接引用dist/js/bundle.js，进行使用-->
    <script src="dist/js/bundle.js"></script>
</body>
</html>

3.直接访问这个index.html的路径，就可以看到效果
复制代码

10.将 webpack.config.js 中的 watch

 

1、watch:false 改为 watch:true,可以实现热加载，
2.重新打包，可以实现热加载
3.即修改 hello.js 中的 document.write("<div>hello webpack</div>") 中的“hello webpack”，修改为“hello webpack111”，
4.刷新页面，内容也会跟着变更

11.但是一般不这么配置

1.不在webpack.config.js文件中配置watch
2.但是打包命令使用：webpack --watch
3.也能实现同样的效果

12.

 

posted on   大话人生  阅读(673)  评论(0)  编辑  收藏  举报
相关博文：
·  vue-使用脚手架vue-cli
·  1-vue+elementUI+sprintboot-项目前的准备
·  webpack - 安装和使用
·  webpack使用入门
·  webpack打包
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
Powered by:
博客园
Copyright © 2025 大话人生
Powered by .NET 9.0 on Kubernetes
点击右上角即可分享
微信分享提示
AI IDE Trae