webpack如何将css文件单独抽离

css文件插到html的方式有以下两种：

1.全部插入到 style 中

首先用 css-loader 将 css 文件变成 commonjs 模块加载到 js 中，里面的内容是样式字符串，然后用 style-loader 创建 style 标签，将 js 中样式资源插入进行，添加到 head 中生效。

{test: /\.scss$/,use: [//创建style标签，将js中样式资源插入进行，添加到head中生效"style-loader",//将css文件变成commonjs模块加载到js中，里面的内容是样式字符串"css-loader"]
}

1.生成 css 文件通过 link 标签引入

需要用到 mini-css-extract-plugin 这个插件，它的作用就是将css抽离成单独文件并引入，具体配置方式如下：

第一步：引入这个插件：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

第二步：在 plugins 中实例化 MiniCssExtractPlugin，这里 filename 表示生成的 css 文件放到打包目录下的 css 文件夹下，并且文件名为 index.css。

new MiniCssExtractPlugin({filename: "./css/index.css",
})

第三步：用 MiniCssExtractPlugin.loader 取代 style-loader，为了将 css 单独抽离出来成单独文件。

{test: /\.css$/,use: [MiniCssExtractPlugin.loader,"css-loader"],
}

如果想在 style 资源中注入内容，导入 css / sass / scss / less / stylus 这些内容。可以安装 style-resources-loader。

module.exports = {// ...module: {rules: [{test: /\.scss$/,use: ['style-loader', 'css-loader', 'sass-loader', {loader: 'style-resources-loader',options: {patterns: [path.resolve(__dirname, 'path/to/scss/variables/*.scss'),path.resolve(__dirname, 'path/to/scss/mixins/*.scss'),]}}]}]},// ...
}

主要作用是导入一些公共的样式文件，比如：variables / mixins / functions，避免在每个样式文件中手动的 @import 导入。

webpack如何将css文件单独抽离相关推荐

webpack如何将css文件分离的,详解webpack分离css单独打包
这篇文章只写了如何把css打包成一个css文件,没有讲解如何打包成多个css文件,经简友提点,这里添加上了打包成多个css文件的方法. 瞎扯 webpack 把所有的资源都当成了一个模块, css, ...
webpack如何将css文件分离的,【Webpack小书】Webpack中如何将CSS样式抽取到独立文件中？ - Tim的资源站...
现在我们有一个很好的打包了,但所有的 CSS 都去了哪里?根据配置,它已被内联到 JavaScript!虽然这在开发过程中很方便,但听起来并不理想. 当前的解决方案 CSS 是无法缓存的,并且还有一个 ...
webpack配置：css文件打包、JS压缩打包和HTML文件发布
一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{color:red;font-size:20px; } 2.css建立好后,需要引入 ...
webpack中处理css文件
文章目录一.引入webpack 1. 创建如下目录文件 2. 打开本文件目录下的控制台,初始化项目 3. 安装webpack需要的包 4. 配置webpack 二. 需要引入合适的依赖来让引入css ...
webpack 独立打包 css 文件
插件地址: extract-text-webpack-plugin 安装插件 npm install extract-text-webpack-plugin –save-dev 使用方法,在 webp ...
webpack如何将css文件分离的,webpack--css：Less文件的打包和分离(八)
目录结构 before after webpack.config.js 文件内容 src/css/index.less @blue :#00aaee; #jie{ width: 100px; heig ...
Webpack 如何抽离、压缩 CSS 文件？
关于抽离.压缩 css 文件,主要目的是为了减小体积,提升性能. 如果为本地使用,仅需配置 style-loader 和 css-loader 即可.css-loader 解析 .css 文件为 cs ...
Webpack打包css文件-css-loader+style-loader
一,前言之前"webpack介绍"一篇中提到webpack的四个核心概念:entry-入口,output-出口,loader-加载器,plugins-插件前面打包和输出文件使用了 ...
webpack学习(四) -- css tree shaking
css tree shaking 我们和webpack(三)一样,用案例说话安装css需要的两个loader,css-loader 和style-loader npm install css-loa ...
使用extract-text-webpack-plugin提取css文件
一.css之上的语言 js之上的语言有jsx.tyepscript.coffescript. html之上的语言有jade. css之上的语言有sass.scss.less.stylus,这几种语言区 ...

webpack如何将css文件单独抽离

webpack如何将css文件单独抽离相关推荐

最新文章

热门文章