本文记录了在B站学习Vue过程中遇到的Webpack安装问题及解决方案，包括安装失败后的正确步骤、如何创建配置文件以简化打包过程，以及在VSCode中使用Webpack进行项目构建的具体实践。
###在b站学vue时，安装webpack的时遇到一些问题，问题虽多但是都很好解决，网上也很多解决方案，这里做一下自己的笔记（有遇到一样问题的同学可以参考一下）
####webpack的使用：安装然后看能不能通过指令查找webpack的版本，一般能通过指令查找就说明安装成功了，在这里会直接截图然后还会进行文字说明（还有很重要的一点，大家都知道b站时个好的视频学习网站，自己在遇到问题的时候其实建议开弹幕，看别人是否一样的问题，一般会有人提供解决方案，这样解决问题会快速很多）
-
我是在项目根目录下安装webpack的，不是全局安装的，安装指令：npm i webpack --save-dev
-
安装完后，我就输入webpack -v 看有没有输入版本，若是输出版本号，我就可以继续我的操作了（用webpack去打包一个js文件，然后引入到html中），但是，它报这样的信息：
这里写的好像是说得安装webpack-cli，一般这样子提示什么就跟着做什么，然后我就选了y，安装后还是一样，我就干脆写n了，然后自己用全局命令安装，安装指令：npm install webpack-cli -g ,再去查看版本号，嘻嘻，安装好了，但是要先注意一下这个版本号，4.0以上的。 -
在vscode中去使用webpack工具啦，在根目录下创建一个index.js 和main.js，代码如下：
index.js代码：
<!DOCTYPE html><html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title Page</title> <!-- <script src="./main.js"></script> --> <!-- 通过webpack这一个前端构建工具，打包成bundle.js文件 --> <script src="../dist/bundle.js"></script> <!-- Bootstrap CSS --> <!-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </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>
main.js代码：
//这是main.js 是我们项目的js入口文件按//1.导入jquery,用变量名$来接收//import *** from ***是ES6中导入模块的方式//由于ES6代码太高级，浏览器解析不了，所以这一行（import $ from 'jquery'）会报错import $ from 'jquery'// const $ = require('jquery')$(function(){ // odd选择器，奇数行为淡蓝色(这里将颜色写死了)；even选择器：偶数个为黄色，用function拼接处一个颜色值 $('li:odd').css('backgroundColor','red') $('li:even').css('backgroundColor',function(){ //D97634是十进制 return '#' +'D97634' })
})//经过刚才的演示，webpack可以做什么？//1.webpack能够处理js文件的相互依赖关系//2.经过webpack能够处理js的兼容问题，把高级浏览器不识别的语法 转为 低级浏览器能正常识别的语法//要运行的webpack 命令： webpack ./src/main.js（要打包的文件的路径）-o ./dist/bundle.js //像这次的演练就是安装完webpack（安装指令：npm i webpack --save-dev 然后可能还需要安装webpack-cli，安装指令：自行百度），这里最好运用到指令为：webpack ./src/main.js -o ./dist/bundle.js(因为webpack版本高所以要用到-o)`在这里插入代码片`- 使用webpack指令，让当前目录下的main.js打包成dist目录下的budle.js然后引入到index.js中，因为安装的版本号是4.0以上的，所以打包指令要加-o，详细指令为：webpack ./src/main.js -o ./dist/bundle.js (这里可以看出，我创建的文件，main.js在src下 然后手动创建一个跟src同级的dist目录，【webpack 要打包的文件的路径 -o 】，而且在这里打包成bundle.js文件)，截图如下：
成功（记得把bundle.js引入index.js文件中,代码：<script src="../dist/bundle.js"></script> ），接下来写一个配置文件，直接用webpack就可以进行打包，创建一个与src同级目录的webpack.config.js文件，编写配置，代码如下:
const path = require('path')// 这个配置文件，其实就是一个js文件，通过node中的模块操作，向外暴露一个配置对象module.exports ={ mode:'development',//需要手动指定入口和出口entry : path.join(__dirname,'./src/main.js'),output:{ path:path.join(__dirname,'./dist'), filename:'bundle.js'}}//当我们在控制台直接输入webpack命令执行的是时候，webpack做了以下几步：//1.首先，webpack发现我们 并没有通过命令形式给它指定是入口和出口//2.webpack就会去项目的根目录中查找一个叫做`webpack.config.js` 的配置文件//3.当找到配置文件后，webpack会去解析执行这个配置文件//4.当 webpack拿到配置对象后，就拿到了配置对象中指定的入口和出口，然后进行打包构建；- 当我们在控制台直接输入webpack命令执行的是时候，webpack做了以下几步：1.首先，webpack发现我们 并没有通过命令形式给它指定是入口和出口2.webpack就会去项目的根目录中查找一个叫做
webpack.config.js的配置文件3.当找到配置文件后，webpack会去解析执行这个配置文件4.当 webpack拿到配置对象后，就拿到了配置对象中指定的入口和出口，然后进行打包构建；；
大概原理也理清楚了，原本很长的webpack指令，通过编写配置文件，直接用webpack就可以了，截图如下：
这样在使用webpack打包的时候就可以直接webpack，不用 加文件以及路径了。
以上只是个人笔记，不喜勿喷
扫一扫
150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
