![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack学习
webpack学习记录
ThanatosY
这个作者很懒,什么都没留下…
展开
-
webpack将所有的css抽取成一个文件以及css浏览器兼容
首先通过命令安装mini-extract-plugin插件然后在需要使用该插件的配置文件中例如webpack.prod.js引入该插件然后注册该插件最后将所有的style-loader替换成最后运行命令即可在打包输出文件夹中找到该css文件了。原创 2023-12-24 10:48:49 · 491 阅读 · 0 评论 -
webpack整理开发模式以及生产模式的配置文件
然后将webpack.dev.js复制一份也放在这个文件夹中并重命名为webpack.prod.js(生产模式的配置)然后将webpack.config.js配置文件移动到该文件夹中并修改名称为webpack.dev.js。npm run build将会在项目根目录下生成一个dist文件夹。然后在package.json中修改scripts。首先在项目根目录下新建一个config文件夹。npm run serve将会打开浏览器。测试命令是否能执行成功。原创 2023-12-24 10:45:59 · 337 阅读 · 0 评论 -
webpack搭建开发服务器
然后在webpack.config.js中的module.exports中添加devServer配置。然后在package.json文件中的scripts下添加一个新的脚本。安装webpack-dev-server。原创 2023-12-23 22:33:35 · 339 阅读 · 0 评论 -
webpack加载html资源
然后在webpack.config.js配置文件中引入该插件并且在plugin中注册。最后将模板html中的js引入代码注释掉或删除掉(建议删除)命令即可在打包输出文件夹中看到生成的html文件了。首先通过命令窗口安装该插件,输入命令。原创 2023-12-23 13:19:33 · 424 阅读 · 0 评论 -
webpack使用babel
然后在webpack.config.js的module.rules中添加rule。最后在根目录下新建一个babel.config.js文件,并在其中添加预设。命令即可在打包的时候将新的语法转换为旧的语法。来安装babel相关插件。原创 2023-12-16 23:55:49 · 59 阅读 · 0 评论 -
webpack使用ESLint
最后在根目录下添加.eslintrc.js文件并在里面添加eslint配置,详细规则文档可访问以下链接。接下来需要在webpack.config.js中导入该插件。首先需要暗转ESLint的插件,通过命令。安装eslint的webpack插件。安装eslint最新的版本。原创 2023-12-16 23:54:55 · 49 阅读 · 0 评论 -
webpack加载图标、字体等资源
我使用的是阿里的图标库,下载好图标之后创建一个新文件夹media,并将下载的图标文件中的iconfont.css移动到css文件夹中。然后将该css依赖的.ttf、.woff、.woff2文件移动到media中。然后在webpack.config.js中添加rule配置。然后按照阿里图标库的使用方式在html中添加该图标。即可,刷新打开的项目网页即可看到效果。原创 2023-12-16 23:53:36 · 39 阅读 · 0 评论 -
webpack加载图片资源
然后在webpack.config.js中的module.rules中添加rule。首先在src目录下创建一个新文件夹images,然后在其中放一张png图片。然后修改css文件内部样式并设置该png图片为背景图片。即可,刷新打开的项目网页即可看到效果。原创 2023-12-16 23:53:02 · 82 阅读 · 0 评论 -
webpack加载css资源
最后打包,并在html文件中编写相应样式的页面代码即可看到css文件的效果。然后在webpack.config.js中添加rules配置。然后下载loader插件,并配置loader的rules。新建一个test.css文件,并编写部分样式。然后在main.js文件中引入该css文件。即可,刷新打开的项目网页即可看到效果。原创 2023-12-16 23:52:33 · 64 阅读 · 0 评论 -
webpack基本配置
配置文件名称webpack.config.js(在nodejs环境中运行所以暴露模块用的语法是commonjs暴露)即会自动在当前文件夹目录下寻找webpack.config.js文件并按里面的配置执行了。原创 2023-12-16 23:51:04 · 27 阅读 · 0 评论 -
webpack简单使用
最后创建一个public文件夹并在其中新建一个index.html文件。然后在其中添加一个main.js文件,并编写几个简单的js文件。然后在html文件中引入打包好的main.js文件即可使用。接着在main.js中引入该js文件并调用(代码如下)例如新增一个count.js文件,内部代码如下。首先在项目中创建一个src文件夹。然后安装webpack依赖。原创 2023-12-16 23:48:07 · 27 阅读 · 0 评论