![](https://img-blog.csdnimg.cn/20190918140012416.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
webpack学习笔记
在学习如何使用webpack中做的笔记
程序员徐小白
程序员徐小白,专注于Java后端研发领域。
同名微信公众号,我会第一时间在上面分享我的学习笔记,还有各种学习资料。
展开
-
webpack开发环境的搭建
1. 创建一个文件夹我这里创建的是webpack-vue2.安装webpack和初始化cnpm i webpack -gcnpm i webpack --save-devnpm init -y命令完成后,会多出两个文件夹3.webpack配置文件(webpack.config.js)创建一个.js文件const path=require('path')//引入插件类c...原创 2020-04-13 23:01:41 · 109 阅读 · 0 评论 -
webpack配置alias设置根目录
1.增加alias属性在webpack.config.js文件中const path=require('path')module.exports={ resolve:{ //给src取别名 alias:{ '@':path.join(__dirname,'./src') } }}2.使用别名在引用src目...原创 2020-02-15 13:35:25 · 1487 阅读 · 0 评论 -
cnpm无法使用
1.使用时的报错PS D:\wordspace\webpackTest> cnpm icnpm : 无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。所在位置 行:1 字符: 1+ cnpm i+ ~~~~ + CategoryInfo : ObjectNotFound...原创 2020-02-14 12:31:17 · 1243 阅读 · 0 评论 -
webpack中的babel配置
webpage只能处理一部分ES6的新语法,更高级的语法不能处理,需要借助第三方loader将高级语法转换为低级语法大部分时候用不上,但是如果需要在比较低级的浏览器运行时,就需要使用1.安装babel相关的包第一套包npm install babel-core babel-loader babel-plugins-transform-runtime -D第二套包npm insta...原创 2020-02-13 12:43:18 · 243 阅读 · 0 评论 -
webpack中url-loader的使用
使用url-loader的原因:webpack无法处理url地址1.处理图片url安装第三方插件安装命令npm i url-loader file-loader -Durl-loader内部依赖file-loader配置webpack.config.js在module.exports中新增属性 module:{ rules:[{test:/\.(jpg|...原创 2020-02-13 12:31:02 · 1658 阅读 · 0 评论 -
webpack处理第三方文件的配置
1.webpack处理第三方文件的过程当发现不是js文件,会先去配置文件找有没有对应的第三方loader规则如果找到对应的规则就会调用相应的loader处理这种文件,如果没有,就会报错调用loader的顺序是从后往前当最后一个loader处理完毕后,会将结果直接交给webpack进行打包2.处理css的第三方loader导入css在导入页面的js文件中import './css...原创 2020-02-13 12:22:57 · 346 阅读 · 0 评论 -
html-webpack-plugins的配置
1.html-webpack-plugin插件的作用将物理磁盘中的html放入到内存中可以直接访问内存的html和js文件html文件会自动引用内存中的js文件对一个html文件和js文件单独修改完毕后,还要用webpack打包2.安装npm install html-webpack-plugin -D3.导入插件在webpack.config.js中const htmlW...原创 2020-02-13 12:14:34 · 537 阅读 · 0 评论 -
webpack-dev-server的命令参数
1.基本命令:webpack-dev-server加在package.json中scripts对象中 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server !!!!!加在这里!!!!!", "build": "webpa...原创 2020-02-13 12:02:44 · 1447 阅读 · 0 评论 -
webpack-dev-server的基本使用
1.webpack-dev-server自动打包工具用于开发时,需要频繁的修改js文件,修改完成后仍需要用webpack打包强制要在本地项目安装webpack和webpack-clinpm install webpack wepack-cli -D安装webpack-dev-server安装命令npm i webpack-dev-server -D该命令是在项目中安装...原创 2020-02-13 11:52:00 · 533 阅读 · 2 评论 -
webpack配置文件(webpack.config.js)的使用
1.webpack配置文件(webpack.config.js)通过配置文件向外暴露一个配置对象const path=require('path')module.exports={//入口,要打包的文件//要打包的文件不存在,会报错 entry:path.join(__dirname,'./src/main.js'), output:{ //输出文件的相关配置 path:pat...原创 2020-02-13 11:34:19 · 233 阅读 · 0 评论 -
webpack的基本使用
1.使用webpack的原因常见的网页引用的静态文件1)js(.js .jsx .coffee .ts)2)css(.css .less .sass .scss)3)images(.jpg .png .gif .bmp .svg)4)字体文件(.svg .ttf .eot .woff .woff2)5)模板文件(.ejs .jade .vue)有太多的资源需要被管理解决静态资源...原创 2020-02-13 11:27:20 · 86 阅读 · 0 评论