webpack css文件编译、自动添加前缀、剥离

1.css文件编译

webpack默认只能编译js文件,引入css需要loader支持

// css文件写入js中
npm i style-loader -D
// css文件loader
npm i css-loader -D

webpack.config.js的rules中添加

{
    test: /\.css$/,
    use:[‘style-loader‘, ‘css-loader‘]
}

2.css自动添加前缀

// postcss-loader 可以给css自动添加-webkit -ms前缀
npm i postcss-loader -D

//autoprefixer插件,针对浏览器兼容设置
npm i autoprefixer -D

// 增加postcss-loader的option
新增文件postcss.config.js,内容:
module.exports = {
    plugins: {
        autoprefixer: {
            browsers: [‘last 7 iOS versions‘, ‘last 3 versions‘, ‘> 1%‘]
        }
    }
}

3.css剥离

//安装剥离插件(如果你是全局webpack,使用时会要你安装到当前项目)
npm i mini-css-extract-plugin -D

webpack.config.js中引入并使用

//引入
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//添加到plugins数组中
plugins:[
    new MiniCssExtractPlugin({
        filename: "css/main.css",
    })
]
//在rules中写入处理loader(之前的style-loader拿掉,因为不需要写入js文件了)
rules:[
    {
        test: /\.css$/,
        use:[MiniCssExtractPlugin.loader, ‘css-loader‘, ‘postcss-loader‘]
    }
]

package.json文件:

{
  "name": "csschange",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.6.1",
    "css-loader": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "postcss-loader": "^3.0.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9"
  }
}

webpack.config.js文件:

const path = require(‘path‘)
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    entry:‘./main.js‘,
    output:{
        filename:‘bundle.js‘,
        path:path.resolve(__dirname,‘./dist‘)
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use:[MiniCssExtractPlugin.loader, ‘css-loader‘, ‘postcss-loader‘]
            }
        ]
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename: "css/main.css",
        })
    ]
}

postcss.config.js文件:

module.exports = {
    plugins: {
        autoprefixer: {
            browsers: [‘last 7 iOS versions‘, ‘last 3 versions‘, ‘> 1%‘]
        }
    }
}

原文地址:https://www.cnblogs.com/superjsman/p/11599662.html

时间: 2024-10-07 12:16:38

webpack css文件编译、自动添加前缀、剥离的相关文章

pycharm在创建.py文件时自动添加前缀

有时候需要在创建py文件的时候需要自动添加前缀,他的具体操作是 打开pycharm的文件-->设置-->编辑器-->python script把你需要添加的前缀添加进去 #!/usr/bin/env python # -*- coding: utf-8 -*- # File  : ${NAME}.py # Author: HuXianyong # Date  : ${DATE} 原文地址:http://blog.51cto.com/853056088/2137381

用Emmet写CSS3属性会自动添加前缀

CSS3的很多属性都包含浏览器厂商前缀,用Emmet写CSS3属性会自动添加前缀,比如输入trs 会展开为: -webkit-transition: prop time; -moz-transition: prop time; -ms-transition: prop time; -o-transition: prop time; transition: prop time;

CLin 和 IDEA创建文件时自动添加作者和时间信息 + 多个.cpp文件在CLion下运行问题

CLin 和 IDEA创建文件时自动添加作者和时间信息 file -> setting -> Editor -> File and Code Templates -> 点击Includes下的"C File Header"或"File Header" 修改成: /*************************************************************************** 功能: Created by

webpack.config.js====CSS相关:::postcss-loader加载器,自动添加前缀

1. 安装:复制拷贝文件 cnpm install postcss-loader autoprefixer --save-dev 2. webpack.config.js中使用 rules: [ //配置css加载器 { test: /\.css$/, use: cssExtract.extract({ fallback: "style-loader", use: ["css-loader", "postcss-loader"] }) }, //

用python给html里的css及js文件链接自动添加版本号

传统的给文件链接添加版本号的方法是使用gulp-rev,这里提出的解决方案是使用python来替代gulp-rev. import os import re import uuid import sys def file_extension(path): return os.path.splitext(path)[1] basePath = sys.argv[1] if len(sys.argv)==1: sys.exit() html_list = [] def find_html(path)

PHP 下载文件时自动添加bom头的方法

首先弄清楚,什么是bom头?在Windows下用记事本之类的程序将文本文件保存为UTF-8格式时,记事本会在文件头前面加上几个不可见的字符(EF BB BF),就是所谓的BOM(Byte order Mark).不仅限于 记事本保存的文件,只要在文件的开口包含了EF BB BF 几个不可见的字符(十六进制应该是是xEFxBBxBF,用二进制编辑文件可见).这像是一个约定俗成的东西,当系统看到这玩意的时候,就会觉得你这个文件是UTF-8编码的. 如果你的接口是UTF-8的,你需要强制下载一个文件,

如何使excel表格的内容自动添加前缀

一.假设是要在一列的单元格内容前加上固定的内容,则 方法一在原单元格实现,分两种情况 如果原单元格的内容是数字内容,要在原数字前添加"ABC"这样的前缀则选中这些单元格----右键----设置单元格格式---自定义---类型中写入 "ABC"G/通用格式 ---确定 如果原单元格的内容是文本内容,要在原内容前添加"ABC"这样的前缀则选中这些单元格----右键----设置单元格格式---自定义---类型中写入 "ABC"@ -

Pycharm 新建文件时 自动添加作者时间等信息

可用的变量有: $ {PROJECT_NAME} - 当前项目的名称. $ {NAME} - 在文件创建过程中在"新建文件"对话框中指定的新文件的名称. $ {USER} - 当前用户的登录名. $ {DATE} - 当前的系统日期. $ {TIME} - 当前系统时间. $ {YEAR} - 今年. $ {MONTH} - 当月. $ {DAY} - 当月的当天. $ {HOUR} - 目前的小时. $ {MINUTE} - 当前分钟. $ {PRODUCT_NAME} - 将在其中

vim文件时自动添加作者、时间、版权等信息

在工作中,搞运维的工程师往往会编写或完善自动化脚本时,都会手动添加表头注释,例如版权声明.作用.时间等信息提示,如果每次都手动编辑添加会大大消耗时间,所有我们可以利用快捷方法来节省时间,一种是手动在家目录下.vimrc或/etc/vimrc中添加配置:另一种是下载插件:在这里我给大家简单介绍一下第一种方法: 1.先找到需要添加配置文件的路径: 在家目录文件下查找.vimrc   (注意是隐藏文件,如果还是找不到,那么在/etc/vimrc) 2.vim /etc/vimrc 打开,在文件末尾添加