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

处理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处理样式文件

猜你喜欢