1、编写src/css/main.css#app a{ display: inline-block; width: 150px; line-height: 30px; background-color: dodgerblue; col...
原创
2023-07-17 14:22:54
72阅读
// { // test:/\.css$/, // use:['style-loader','css-loader'] // } , { test:/\.scss$/, use:[ 'style-loader', // 'css-loader', { loader:'css-loader', opt
原创
2021-11-29 15:08:59
126阅读
我假设你环境已经安装好了：webpack默认是不支持打包css(style)的需要安装 npm install css-loadle.css')
原创
2022-07-25 16:42:31
246阅读
npm npm i -D style-loader css.loader webpack.config.js module.exports = { // ... module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loade ...
转载
2021-09-09 10:37:00
268阅读
2评论
最新打包vue cli 4.5 项目时，体积尽然达到了9M，页面访问的速度，因此进行尝试进行优化，最终压缩到 968k ，效果明显。下面是优化方法。首先新建文件'vue.config.js'，放在项目根目录下，与package.json在同一级目录下1.BundleAnalyzer 作用：展示打包图形化信息，会打开一个html页面，帮助自己分析哪些文件过大，可针对其进行优化，上线前&nb
转载
2023-11-22 07:03:28
139阅读
深入学习rollup来进行打包阅读目录一：什么是Rollup?二：如何使用Rollup来处理并打包JS文件？三：设置Babel来使旧浏览器也支持ES6的代码四：添加一个debug包来记录日志五：添加插件来替代环境变量六：添加 UglifyJS来压缩我们js的代码七：监听文件变化的插件 --- rollup-watch八：开启本地服务的插件 --- rollup-plugin-serve九：实时刷
转载
2023-12-23 17:54:13
236阅读
最新打包vue cli 4.5 项目时，体积尽然达到了9M，页面访问的速度，因此进行尝试进行优化，最终压缩到 968k ，效果明显。下面是优化方法。首先新建文件'vue.config.js'，放在项目根目录下，与package.json在同一级目录下1.BundleAnalyzer 作用：展示打包图形化信息，会打开一个html页面，帮助自己分析哪些文件过大，可针对其进行优化，上线前&nb
转载
2023-10-12 21:09:44
165阅读
1、安装 2、项目目录： index文件夹下的index.css： index文件夹下的index2.css： index文件夹下的index-less.less： index文件夹下的index.js： login文件夹下的index.js： login文件夹下的login.css： 3、webp
转载
2017-09-20 15:44:00
248阅读
2评论
gulp学习记录npm init -y yarn add gulp -D 修改 package.json "scripts": { "build": "gulp" }, // 查看版本 npx gulp --version 新建 gulpfile.js // 重命名 gulp-rename // 压
原创
2022-06-05 01:44:37
193阅读
1、安装nodejs，如已安装请忽略2、安装grunt，npm install grunt3、配置package.json和gruntfile.js文件，详解请见想合并整个文件夹的文件请安装grunt-contrib-concat，想压缩某个文件请安装grunt-contrib-cssminhttp://learningtogrow.blog.51cto.com/3076238/1909487 h
原创
2017-03-23 10:50:36
1195阅读
初始化：npm init -y安装webpacknpm install webpack webpack-cli --save-dev安装vuenpm i --save-dev vue vue-loader vue-template-compiler 安装css的插件npm install --save-dev style-loader css-loader...
原创
2021-07-05 13:48:48
481阅读
// 安装 模板解析 "html-webpack-plugin": "4.0.0-alpha", npm install html-webpack-plugin -D "css-loader": "^3.6.0", "style-loader": "^2.0.0", "less": "^3.9.0"
原创
2021-07-28 15:44:52
1728阅读
（1）预备备① webpack3.8.1 安装 详见：http://blog.csdn.net/fanfan4569/article/detailsvar ExtractTextPlugin = req...
原创
2022-10-21 16:20:27
790阅读
前戏 Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要结合插件来使用，这些插件在Webpack 中被称为 Loader （加载器） 来进行转换。 Loader 可以理解为是模块和资源的转换器，它本身是一个函数，参数接受的是源文件， 返回值是转换后的结果。 这
原创
2022-07-07 10:45:41
386阅读
某些项目使用node作为中间件，来连接前端和后端，在中间做相应处理。线上一般都是vue打包完成放入指定位置，node做配置就可访问，但这是生产时候用的。那开发过程中，如何使用node直接启动未打包的vue项目，实现vue 和 node 一起开发呢？例子如下：demo: https://github.com/zhangyunhou/node_start_vuegit: https
转载
2024-07-20 16:55:05
218阅读
1、在sublime里安装好less（less语法高亮功能插件）和Less2Css（编译功能插件）这两个插件，具体步骤为： Ctrl+Shift+p打开命令面板，输入install package并在下拉里选中install package（这里必须已经安装好了管理插件的package control插件），弹出新搜索框之后再输入要安装的插件，然后下拉出现对应插件，点击安装。2、安装好插件后还不能
转载
2024-04-01 19:32:48
63阅读
我们要如何将他们合成一个libs文件，这都是令人头疼的问题但是grunt的出现却
转载
2023-07-24 20:18:12
154阅读
在实际开发中，图文是应用最多的场景，前面的课程讲解了文字的使用 第9天：自我介绍，今天内容是关于在 web 中如何使用图片。CSS 中主要有两种方式可以显示图片，一种是通过设置背景图，另一种是使用 img 标签。img标签
img标签比较特殊，它默认属于行内（inline）元素。比如下面这段代码在浏览器显示的样式是： .mini-logo { width: 30px; /* 指定
什么是Webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
Webpack安装
全局安装
npm install webpack -g
npm install webpack‐cli -g
安装后查看
原创
2021-07-02 11:42:51
693阅读
什么是WebpackWebpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，
原创
2022-01-19 11:10:25
88阅读
