webpack的打包配置-1修改版

 我来答
户如乐9318
2022-06-18 · TA获得超过6639个赞
知道小有建树答主
回答量:2559
采纳率:100%
帮助的人:137万
展开全部

1、现在本地创建项目目录

2、然后在index.html中写入html的结构
3、想要先安装jquery,先npm init -y一下, npm install jquery -S 【项目目录安装,必须是小写的jquery,否则会报错】,在index.html引入main.js
4、在main.js中写入内容如下:

使用webpack处理一下,转换成浏览器可以识别的文件
a: 先全局安装一下webpack=> npm install webpack@3.5.5 -g
b: 在终端中执行: webpack ./src/main.js【要处理的文件的目录】 ./dist/bundle.js【要输出的文件的目录以及文件名】 ,会在dist中生成一个bundle.js文件,然后在 index.html中引入的main.js文件改成 bundle.js
这样的话每次打包时候都需要执行 webpack ./src/main.js ./dist/bundle.js
c: 为了不手动指定入口和出口文件,在项目根目录中新建一个webpack.config.js(基于node的,所以** **node.js的命令都可以识别)

这样的话,就可以在终端中直接执行命令:webpack就可以直接打包了,但是还有个小问题。就是它不 会自动更新,需要手动刷新一下。下面我们就来解决这个问题。来配置webpack-dev-server

4、使用webpack-dev-server实现自动打包编译

直接安装webpack最高版本的时候,可能会遇到报错的情况,如果对于版本没有要求的话,可以降低版本:
npm install webpack@3.5.5 -D 如果还会有报错出现的话,可以试试使用cnpm安装

需要先在终端中安装webpack-dev-server:具体操作如下:
4.1 npm/cnpm install webpack-dev-server -D 出现下面的提示:【其实此步骤容易出现报错,所以呢,把webpack-dev-server版本修改为@2.9.1=>webpack-dev-server@2.9.1时,就不会报错】

4.2 npm/cnpm install webpack -D 【此步骤也是容易出错的,所以安装的时候要和上边的版本保持一致,webpack@3.5.5版本】
4.3 需要在package.json中配置dev

最后直接执行:npm run dev运行成功,但是需要注意的是此时打包成的bundle.js文件不是磁盘中存在bundle.js文件,而是一个与src dist node_module同级的看不见的文件,在index.html引入的路径也要修改以下=》<script src="/bunlde.js"></script>

此时,正常打包,但是不自动打开浏览器

发布出来,方便自己查看,有什么不对的地方,希望留言纠正修改。(程序员菜鸟一枚)

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式