![](https://img-blog.csdnimg.cn/ed40aa4d08c14227b03b500a04a9c77c.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
webpack
webpack打包配置相关文章
lockloke
记录学习心得
有很多问题,对那些高手来说太简单,所以就没人去解释该怎么处理。然而这才是新手最需要的,毕竟新手嘛,什么问题都可能出现,搜又不知道该搜什么关键字。
希望我的文章能帮到其他人
待我稍微整理下思路后再记录下新人入职后如何快速上手吧
展开
-
webpack实战五--补充内容(less篇)
前面的导入引用操作一样,只是我们使用less的时候,需要安装新的loader,也就是less、less-loader,命令如下: npm i -D less less-loader less和less-loader都需要安装,但需要注意的是,在使用时,只需要使用less-loader即可, module: { rules: [ { test:/\.css$/, use:['style-loader','css-loader']原创 2021-11-04 00:33:54 · 296 阅读 · 0 评论 -
webpack实战五补充内容
当我们有多个css文件,项目文件如下: a.js内容为 console.log(1); import("./b.css"); b.css: @import './c.css'; body{ background-color: rgb(97, 168, 226); } c.css: button{ width: 200px; height: 50px; border-radius: 2px; } html内容为: <!DOCTYPE html.原创 2021-11-03 23:50:10 · 93 阅读 · 0 评论 -
webpack4实战五--loader入门(css篇)
之所以要使用loader装载器,是因为webpack默认只打包js,想要打包css、img等文件就需要借助loader来实现 而打包css便需要使用style-loader直接将css添加到html的style标签里面原创 2021-11-03 17:30:40 · 569 阅读 · 0 评论 -
webpack4实战四--依赖使用(webpack-dev-server篇)
前面几篇webpack的文章的操作之后,我们还是需要手动打开dist中的html文件才能启动页面,但现在我们要尝试使用命令的方式启动。 首先是安装插件webpack-dev-server cnpm i -D webpack-dev-server 这个插件不需要像html-webpack-plugin一样在webpack.config.js中导入,安装了便可使用 npx webpack serve 但是,这样写太麻烦了,记住这么多单词挺麻烦的,我们可以在package.json中使用简化的名原创 2021-11-01 23:28:10 · 953 阅读 · 0 评论 -
webpack4实战三--插件使用(html-webpack-plugin篇)
因为在打包时,webpack默认只会打包js,也就是说,咱们打包出来的dist文件夹中只有js文件而已,并没有html啥的其他文件。 当我们想查看打包后的js文件是否可以使用的话,我们需要将html文件拷贝到dist目录下,然后在html文件中使用script标签引用打包好的js文件,步骤很是麻烦。 那么可以怎么简化这些操作,自然是使用插件咯,标题白写的不成。 进入正题: 一、找到对应功能的插件 有一个插件可以实现自动添加script引用到html文件的操作,html-webpack-plugin原创 2021-11-01 21:29:54 · 768 阅读 · 0 评论 -
webpack4实战二--配置信息解析(webpack.config.js篇)
一、webpack默认配置信息 默认入口:src/index.js 默认出口:dist/main.js 只打包js,生成main.js webpack默认只打包js,不会打包img、css等文件,若需要打包这类文件需要使用插件 二、基本配置解析 const path = require('path'); module.exports = { mode: 'development', entry: './src/a.js',//入口文件 output: {//打包出口配置原创 2021-11-01 17:57:49 · 174 阅读 · 0 评论 -
webpack4实战一--简单配置打包
一、项目package.json生成 直接在项目的根目录运行cmd执行下面命令,便可生成package.json npm init -y 二、安装webpack相关依赖 安装 webpack 与 webpack-cli ( 4 版本需要cli才能执行命令) npm i -D webpack webpack-cli 三、webpack配置(踩坑过) 我在使用webpack4的时候就因为这个踩坑了,我不知道这个webpack4是要配置入口文件的,折腾了挺久才反应过来 在项目根目录新建一.原创 2021-11-01 16:45:44 · 351 阅读 · 0 评论 -
webpack系列的一些个人经验
这篇文章没想写什么技术内容,只是作为webpack系列分类的一个闲扯。 我刚开始接触这个webpack打包,从培训课程中学的知识在运用时就报错了,折腾了我大半天才做出来,一点一点写吧。(好在这个webpack可以写一次当模板使用,不然这不得累死)。 因为刚开始使用时就已经是较高版本的webpack了,像现在我安装下来的就是下面的这样了 "devDependencies": { "webpack": "^5.61.0", "webpack-cli": "^4.9.1" } ...原创 2021-11-01 16:17:29 · 83 阅读 · 0 评论