webpack的打包配置-1修改版

Posted 2023-03-07

参考技术A

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>

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

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