我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

大家好,在本篇教程中,苏南大叔继续说的是:webpack@4如何在.js代码中,提取css文件,并且插入到模板之中。从效果上来说,和处理js的过程比较相似。需要安装个新的插件mini-css-extract-plugin,并进行配置。

苏南大叔:webpack4系列教程,如何提取css文件并插入代码到html? - webpack-css-hero
webpack4系列教程,如何提取css文件并插入代码到html?(图4-1)

webpack@4系列中,处理css的插件,名字叫做:mini-css-extract-plugin。注意:网络流传的相关插件叫做:extract-text-webpack-plugin,但是它已经废弃了。不能在webpack@4系列中使用。

本文测试环境:win10node@14.2.0npm@6.14.4webpack@4.43.0mini-css-extract-plugin@0.9.0css-loader@3.5.3

安装插件

webpak@4中处理css的插件叫做:mini-css-extract-plugin。另外,本文的方案正确执行,还需要css-loader这个webpack插件。它们的安装命令如下:

npm i mini-css-extract-plugin css-loader -D

对于网上流传的安装extract-text-webpack-plugin的说法,如果您不是最新的webpack@4系列版本的话,那么,您也可以试试extract-text-webpack-plugin

基本使用方法

当然,还是要配置webpack.config.js这个配置文件。

const path = require("path");
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
//...
module.exports = {
    mode: 'production', // 环境
    entry: {
        //...
        main: './src/main.js'
    },
    output: {
        filename: 'js/[name].[hash:8].bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        //...
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: 'css/[name].[hash:8].css',
            // chunkFilename: '[id].css',
        }),
        new HtmlWebpackPlugin({
            template:"./html/index.html", // 根据 目标文件生成 html
            title: 'Output Management',
            showErrors: true,
            inject: 'body',
        }),
    ],
    module: {
        rules: [
            {
              test: /\.css$/,
              use: [
                {
                  loader: MiniCssExtractPlugin.loader,
                //   options: {
                //     publicPath: '/public/path/to/',
                //   },
                },
                'css-loader',
              ],
            }
        ]
    },
}

苏南大叔:webpack4系列教程,如何提取css文件并插入代码到html? - webpack-css-rules
webpack4系列教程,如何提取css文件并插入代码到html?(图4-2)

这个插件,可以完美的把css插入到html模板的<head>区域,还是比较好用的。css的路径是ouput.pathnew MiniCssExtractPluginfilename的两者组合。

苏南大叔:webpack4系列教程,如何提取css文件并插入代码到html? - webpack-css-result
webpack4系列教程,如何提取css文件并插入代码到html?(图4-3)

引入css文件

对于webpack来说,.css文件是依托.js文件而存在的。引入的方式是import。例如:
main.js:

import "./test.css"
// import url from './test.css'
console.log("aa")

webpack并不直接认识.css文件,它是通过loader识别css文件的。需要正确配置相关loader,否则,您可能会看到下面类似的错误信息:

苏南大叔:webpack4系列教程,如何提取css文件并插入代码到html? - webpack-css-rules-error
webpack4系列教程,如何提取css文件并插入代码到html?(图4-4)

ERROR in ./src/test.css 1:4
Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> body{
|     background: red;
| }
 @ ./src/main.js 4:0-28

这个主要的原因就是没有配置.css文件的loader

相关链接

extract-text-webpack-plugin已经被废弃,无法在webpack@4系列中使用,替代者是:mini-css-extract-plugin

更多链接:

总结

这个提取css的配置,明显复杂很多。在市面上,还有更多处理css文件的loader,但是,这里苏南大叔就说这几个实用的。

更多webpack@4系列教程,请参考苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   css    webpack