webpack5--css 打包
1.在 src 文件夹下面新建 css 文件夹,创建 common.css
body{background-color: #f2f2f2; } a{color: #188eee;text-decoration: none }
整个文件目录如下图:
2.css建立好后,需要引入到入口文件,这里我们引入到base.js中
import css from './css/common.css'; var open=true; export {open};
如下图:
3.终端安装 style-loader 和 css-loader
cnpm install --save-dev style-loader css-loader
4.在 webpack.config.js 中 通过配置 module 引入这2个模块
const path = require('path'); //引入path module.exports = {mode: 'development',entry: {index: path.join(__dirname, 'src/index.js'),signup:path.join(__dirname, 'src/signup.js'),},output: {//webpack4中的path默认值即为'./dist',可不用设置path:path.join(__dirname, 'dist'), filename: '[name].bundle.js',},devServer: {contentBase: path.join(__dirname, 'page'),compress: true,port: 8084},module:{rules: [{test: /\.css$/,use: [ 'style-loader', 'css-loader' ]}]}, }
5.终端执行 cnpm run start
成功的话,如下图:
6.执行 cnpm run server
成功的话,如下图:
上面执行完毕后,浏览器会自动打开http://localhost:8084/,可以看到样式已经打包到html文件里去了,如下图:
感谢阅读~~
webpack5--css 打包相关推荐
- webpack5 css打包压缩
首先,你需要安装 css-minimizer-webpack-plugin: npm install mini-css-extract-plugin --save-devnpm install css ...
- 【Webpack5 配置分包加载 多文件js/css打包 】
Webpack5 配置分包加载 多文件js/css打包 - 毛毛 - 毛大姑娘 的 后花园
- html如何打包压缩,所有css打包压缩到一个js里面
所有css打包压缩到一个js里面 打包css文件的意义:最终把css文件压缩到最终生成的js文件里,页面不需要再加载css文件,并且是压缩过的 打包css文件,安装style-loader css-l ...
- css打包优化去重去无效代码purifycss-webpack purify-css -8
1:确保自己的电脑已经安装了node和Git软件 2:自己在盘里随便创建一个文件夹一般为英文(也就是你自己的项目名称) 3:在新创建好的文件夹里面右键点击调出git指令窗口在窗口里面输入如下指令: ...
- webpack css打包为一个css
1.安装 npm install extract-text-webpack-plugin --save-dev 2.项目目录: index文件夹下的index.css: body{background ...
- asp.net mvc 压缩html代码,浅谈ASP.NET中MVC 4 的JS/CSS打包压缩功能
今天在使用MVC4打包压缩功能@Scripts.Render("~/bundles/jquery") 的时候产生了一些疑惑,问什么在App_Start文件夹下BundleConfi ...
- webpack5图片打包处理
webpack中图片的加载需要使用到file-loader/url-loader,url-loader(可以将图片转为base64)包含了file-loader module: {rules: [{t ...
- vue修改css打包,vue修改打包文件的路径
最近用vue做一个项目,刚开始没想到后台用的微擎,不能前后端完全独立.而且 index.html 页面放在template文件夹中,而静态的css和js等文件则放在 /addons/business/ ...
- webapck将css 打包后单独提取到一个css文件中
webpack4 提倡, 一旦用了这个, 不能使用style-loader 以及css module 安装 npm install --save-dev mini-css-extract-plugin ...
- 打包html js为一个文件,在vue-cli中如何将所有js以及css打包成一个js文件
这样的需求不是很合理啊.具体参考楼上回答. 但非要实现也可以. 1.再怎么样,我也建议提取css建议.不然等待JS加载完,才显示样式.用户明显可以看出样式缺失,然后才有样式. 提取使用的插件是用的ex ...
最新文章
- python手机版下载苹果版-Pyto-Python3
- boostrap 鼠标滚轮滑动图片_Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法...
- Python 批量处理特定格式文件
- vs 2019 社区版许可证过期_Switch版《最终幻想12:黄道时代》对比PS4版 就没差
- [Leedcode][JAVA][第67题][二进制求和][位运算][字符串]
- linux性能诊断,linux下跟性能相关的命令以及系统性能诊断
- 三步搞定android应用底部导航栏
- Nginx 配置生成自签证书
- AutoIt:工具栏中没有其它工具,eg,Koda
- Visio 2013打开自动关闭,闪退的解决办法
- 计算机等级考试网络工程师题库,计算机等级考试4级网络工程师习题库要点
- 厂商服务器存储默认管理口登录信息 默认IP、用户名、密码
- 【Excel_007】利用excel进行线性规划求解
- JPA和 QueryDSL入门
- 第二人生的源码分析(三十)UDP接收数据和Windows网络关闭
- vue 如何使用md5密码加密
- linux中彻底分析#!bin/sh是什么意思
- 微软 Win10 更新再出 bug
- 磁盘分区、格式化及 LVM 管理
- 统计学——线性回归公式推导