x1037490413的博客

url-loader和file-loader用法差不多，url-loader是基于file-loader封装的，比它多了一个功能，可以压缩，比如base64，file-loader是将资源原封不动的输出出去开发环境配置：处理所有资源，能让代码运行资源越来越多我们要把资源划分到不同目录一定要注意路径问题，我们可以把图片资源放在src下的imgs文件夹下，其他比如字体资源放在media文件夹下，这时候文代码里面的一些路径要记得改，iconfont.css里其他四种格式的路径也需要改！！！webpack.

我们用原来的代码举例，打包其他资源里的代码当我们打包好之后，build文件夹里生成了index.html文件，但是我们想修改代码，但是显示不出来，运行看到的东西还是之前构建的，重新打包终端输入webpack才行，这样重复打包的过程很麻烦，devServer就是自动帮我们打包的工具，那么如何配置呢？开发服务器devServer:用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）特点：只会在内存中编译打包，不会有任何输出启动devServer指令为：npx webpack-dev-server(这个

其他资源就是不用做任何处理，原封不动输出出去就可以了我们先用图标库来举例，先去阿里巴巴矢量库下载几个，我们用font-class举例先将iconfont.css复制到src文件夹中，并在入口Index.js中引入它，其他的四种格式的文件也要复制到文件夹中我们要打包的是css资源（iconfont.css）,html资源（index.html）和字体图标资源注意！！！！！！！必须style-loader在前面，css-loader在后面，我放错了顺序报错了代码：index.html<

1.创建index.html,index.less,并引入图片2.创建入口文件index.js，引入index.less,不用引入html文件，因为插件会帮忙引入3.打包图片资源需要下载包 url-loader和file-loader，html-loader4.build文件夹里就是打包好输出的东西，有时候只输出了部分图片，是因为有的图片呗base64处理成了字符串，而什么大小的图片被处理成字符串是自己设置的...

1.在src中创建webpack的入口文件index.js，index.html2.src的同级目录下创建webpack.config.js3.下载插件html-webpack-plugin老规矩…初始化，下webpack webpack-cli，下载大项目里，以后在这个大项目创建文件测试，就不用重复下包了注意：下包是在最外面的大项目文件夹里下的。运行时要进入文件《打包Html资源》中运行现在项目文件是这样的我们运行，终端输入webpack如果【webpack】HtmlWebpackPlugi

文章目录一：Webpack需要掌握的基础知识二：webpack五个概念1.Entry2.Output3.Loader(翻译成webpack能识别的资源)4.Plugins5.Mode(模式) 开发模式和生成模式三 ：下包以及初始化包（npm init）1.在vs code的项目中打开终端，输入npm init2.在终端下载失败解决方案四：webpack初体验1.准备2.开始打包一：Webpack需要掌握的基础知识二：webpack五个概念1.Entry2.Output3.Loader(翻译成

在cmd中可以正常执行npm -v,nodemon -v指令,但是在vs code终端中,无法执行npm -v,nodemon -v等指令查了很多解决方法后终于找到了有用的一条方案一,右键vs code 兼容性 以管理员身份运行,重启vs code方案二,添加npm所在路径的环境变量那么不知道npm的路径怎么办??现在cmd中执行 npm list -g --depth 0 查看全局安装的包可以看到npm的安装路径,把路径添加到环境变量中即可,我是win10的,很好配置,如图,我的是C:\Us

1.在所在的文件夹右击鼠标，选择“在集成终端中打开”随后出现终端：2、vscode默认终端时Powershell，所以要更改（我这里改过了所以没有显示Powershell）。点击下拉按钮，选择“选择默认Shell”3.这个时候抬头往上看，看到菜单下main出现了选项：直接点击这个cmd，点完之后下拉那里还是看不到cmd，所以4.关闭vscode重新启动，就可以找到啦！然后再输入：webpack ./src/main.js ./dist/buddle.js锵锵，这里就出现咯：..

运行项目时报错: ‘webpack’ 不是内部或外部命令,也不是可运行的程序 或批处理文因为当时报错到时候没截图,我这里就不放图片了报这个错时因为没有全局安装webpack,解决方法:1.确保nodeJS已安装找到nodejs目录,我的目录是图片上这个,你的可能不一样,看下有没有以下两个文件,没有就新建修改全局路径,需要把默认的安装包路径改成nodejs里面这两个新建的文件配置全局路径：npm config set prefix “C:\Program Files\nodejs\