Vue系列之 => webpack处理样式文件

时间:2021-12-09 23:24:12

处理css文件

安装

npm i style-loader css-loader -D

main.js

import $ from 'jquery' //Es6中导入模块的方式
import './css/index.css'
// import './css/index.css' webpack默认只能打包处理js类型文件
//如果需要处理非js类型的文件,我们需要手动安装一些合适的第三方loader加载器
// 1、打包处理css文件,需要安装 npm i style-loade css-loader -D
// 2、打开webpack.config.js这个配置文件,在里面新增一个配置节点,叫做module它是一个对象
//然后在module这个对象上有个rules属性,这个rules属性是个数组;这个数组中存放了所有第三方
//文件的匹配和处理规则 $(function(){
$('li:odd').css('backgroundColor','red');
$('li:even').css('backgroundColor',function(){
return 'skyblue';
});
})

webpack.config.js

const path = require('path');
//启用热更新的第二步,导入webpack
const webpack = require('webpack');
//导入在内存中生成html页面的插件,只要是插件,都要放到plugins节点中去
const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {
entry: path.join(__dirname, './src/main.js'),
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
devServer: { //这是配置webpack-dev-server命令参数的第二种形式
open: true, //自动打开浏览器
port: 3100, //设置端口
contentBase: 'src', //指定托管的根目录
hot: true //启用热更新的第一步
},
plugins: [ //配置插件的节点
//启用热更新第三步
new webpack.HotModuleReplacementPlugin(), //new一个热更新的模块对象
new htmlWebpackPlugin({ //创建一个在内存中生成html页面的插件
template : path.join(__dirname,'./src/index.html'), //指定模板页面,根据指定的路径生成内存中的页面
filename : 'index.html' //指定内存中生成的页面的名称
})
],
module : { //这个节点,用于配置所有第三方模块加载器
rules : [ //所有第三方模块的匹配规则
{ test:/\.css$/,use:['style-loader','css-loader'] } //配置处理.css文件的第三方loader规则
     //注意:webpack处理第三方文件类型的过程:
     //1,发现这个要处理的文件不是js文件,就去配置文件中查找有没有对应的第三方Loader规则
     //2,如果能找到对应的规则,就会调用对应的Loader处理这种文件类型
     //3, 在调用loader的时候,是从后往前调用的
     //4,当最后的一个Loader调用完毕,会把处理的结果直接交给webpack进行打包合并,最终输出到bundle.js中去。
]
}
}

处理less文件

npm i less -D

npm i less-loader -D

main.js文件

import $ from 'jquery' //Es6中导入模块的方式
import './css/index.css'
import './css/index.less'
// import './css/index.css' webpack默认只能打包处理js类型文件
//如果需要处理非js类型的文件,我们需要手动安装一些合适的第三方loader加载器
// 1、打包处理css文件,需要安装 npm i style-loade css-loader -D
// 2、打开webpack.config.js这个配置文件,在里面新增一个配置节点,叫做module它是一个对象
//然后在module这个对象上有个rules属性,这个rules属性是个数组;这个数组中存放了所有第三方
//文件的匹配和处理规则 $(function(){
$('li:odd').css('backgroundColor','red');
$('li:even').css('backgroundColor',function(){
return 'skyblue';
});
})

webpack.config.js文件

const path = require('path');
//启用热更新的第二步,导入webpack
const webpack = require('webpack');
//导入在内存中生成html页面的插件,只要是插件,都要放到plugins节点中去
const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {
entry: path.join(__dirname, './src/main.js'),
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
devServer: { //这是配置webpack-dev-server命令参数的第二种形式
open: true, //自动打开浏览器
port: 3100, //设置端口
contentBase: 'src', //指定托管的根目录
hot: true //启用热更新的第一步
},
plugins: [ //配置插件的节点
//启用热更新第三步
new webpack.HotModuleReplacementPlugin(), //new一个热更新的模块对象
new htmlWebpackPlugin({ //创建一个在内存中生成html页面的插件
template: path.join(__dirname, './src/index.html'), //指定模板页面,根据指定的路径生成内存中的页面
filename: 'index.html' //指定内存中生成的页面的名称
})
],
module: { //这个节点,用于配置所有第三方模块加载器
rules: [ //所有第三方模块的匹配规则
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}, //配置处理.css文件的第三方loader规则
{
test: /\.less$/,
//配置处理.less文件的第三方文件规则
use: ['style-loader','css-loader','less-loader']
}
]
}
}

处理scss文件

安装  npm i sass-loader -D   && npm i node-sass -D (在安node-sass要使用cnpm,npm安装极容易失败)

其他配置按照css和less操作即可。

Vue系列之 => webpack处理样式文件的更多相关文章

  1. Vue系列之 => webpack结合vue使用

    安装 npm i vue -S ,  在html页面中放一个容器绑定到el上. 修改webpack.config.js , 在与entry , output节点平级加上 resolve 节点. res ...

  2. Vue系列之 => webpack的url loader

    安装: npm i url-loader file-loader -D  //url-loader内部依赖file-loader webpack.config.js const path = requ ...

  3. Vue系列之 => webpack基础使用

    webpack安装方式 1,运行 npm i webpack -g 全局安装. 2,在项目根目录中运行 npm i webpack --save-dev 安装到项目依赖中 项目目录 进入src运行, ...

  4. vue系列之webpack

    webpack 地址: https://github.com/vuejs-templates/webpack 注意里面的template,用webpack创建的项目,结构就是这样的

  5. Vue系列(三):组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

  6. webpack打包vue项目之后生成的dist文件该怎么启动运行

    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...

  7. Webpack实战(五):轻松读懂Webpack如何分离样式文件

    在上一篇文章中我给大家分享了预处理器(loader),里面讲到了style-loader 和css-loader,有关样式引入的问题,但是上面的样式文件只是引入到style标签里面,并不是我想要的样式 ...

  8. 【webpack】-- 样式加载

    加载css需要用到css-loader和style-loader css-loader将@import 和 url 处理成正规的ES6 import ,如果@import指向的是一个外部资源,css- ...

  9. vue脚手架使用swiper /引入js文件/引入css文件

    1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...

随机推荐

  1. echo选项

    1.  echo -n不换行输出 $echo -n "123" $echo "456" 最终输出 123456 而不是 123 456 2.  echo -e  ...

  2. *[codility]AscendingPaths

    https://codility.com/programmers/challenges/magnesium2014 图形上的DP,先按照路径长度排序,然后依次遍历,状态是使用到当前路径为止的情况:每个 ...

  3. 谈谈我对OAuth的理解

    自己的理解是,OAuth是一种授权标准.   用于为除了用户之外的第三方应用授权,   并且在授权过程中,第三方应用不会接触到用户的任何信息,   授权完成后,第三方应用可访问用户授权范围内的信息. ...

  4. C#如何获取真实IP地址

    大家获取用户IP地址常用的方法是   C# 代码   复制 string IpAddress = ""; if((HttpContext.Current.Request.Serve ...

  5. PHP的类自动加载机制

    在PHP开发过程中,如果希望从外部引入一个class,通常会使用include和require方法,去把定义这个class的文件包含进来. 这个在小规模开发的时候,没什么大问题.但在大型的开发项目中, ...

  6. Linux系统文件的三个重要时间详解

    Linux文件三个时间的查看 Linux下使用命令stat获取文件的三个时间,先看现象 各个时间的含义: Chang time:简称ctime,一个文件或目录的更改时间.在Linux中,基本上无法知道 ...

  7. cocos2dx-lua 延迟调用函数和定时器

    下面是cocos官方的方法. function performWithDelay(node, callback, delay) local delay = cc.DelayTime:create(de ...

  8. [转]GCC系列: __attribute__((visibility("")))

    在 objc-api.h 里面有很多关于__attribute__ 的定义. 例如 #if !defined(OBJC_VISIBLE) # if TARGET_OS_WIN32 # if defin ...

  9. excel中如何让每n行显示同一个数据

    由于需要将数据按照下表格式存储,以方便读取展示,年份列需要每隔7行再递增1 方法: 1. 输入这个公式: = INT((ROW(E1)-1)/ 5)+ 1 进入一个空白单元格,您可以在其中填写序列号, ...

  10. 【星云测试】开发者测试(3)-采用精准测试工具对springcloud微服务应用进行穿透测试

    1.微服务简介 微服务英文名称Microservice,Microservice架构模式就是将整个Web应用组织为一系列小的Web服务.这些小的Web服务可以独立地编译及部署,并通过各自暴露的API接 ...

相关文章