Vue系列之 => webpack处理css文件

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‘; ???});})

const path = require(‘path‘);//启用热更新的第二步,导入webpackconst 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中去。
 ???????] ???}}

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‘; ???});})

const path = require(‘path‘);//启用热更新的第二步,导入webpackconst 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‘] ???????????} ???????] ???}}