webpack中的extract-text-webpack-plugin插件使用方法总结

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack中的extract-text-webpack-plugin插件使用方法总结相关的知识,希望对你有一定的参考价值。

为什么要用 extract-text-webpack-plugin这个插件,这个插件可以为我们实现样式模块化,并且在打包的时候可以生成一个总得css文件。我是在react的项目中用到的。接下来怎么用呐?

1,首先我们npm安装 npm install extract-text-webpack-plugin --save-dev.

2,在webpack.config.js中进行配置 首先我们要引入

const ExtractTextWebpack = require("extract-text-webpack-plugin"); 关于里边参数的详细说明可以看git官网https://github.com/webpack-contrib/extract-text-webpack-plugin
    module: {
        loaders: [
            {
                test: /\.js(x)?$/,
                loader: "babel-loader",
                exclude: /mode_modules/
            },
            {
                test: /\.css$/,
                use: ExtractTextWebpack.extract({
                    fallback: ‘style-loader‘,
                    use: [‘css-loader‘],
                    publicPath: path.resolve(__dirname, ‘dist‘)
                })
            }
        ]
    }

 3:我们想在编译后看到这个文件夹,这样就会在我们的dist目录下生成一个 style.css了,如果你用的是less。sass,stylus这个时候你只需要下载相应的loader然后在里边做相应的配置就好了

plugins: [
        new htmlWebpackPlugin({
            template: path.resolve(__dirname, ‘./src/index.html‘)
        }),
        new ExtractTextWebpack("style.css")
    ]

 

以上是关于webpack中的extract-text-webpack-plugin插件使用方法总结的主要内容,如果未能解决你的问题,请参考以下文章

服务器代码中的 Webpack 热模块替换

webpack在项目中的配置

Webpack5中的文件监听与热更新

Webpack5中的文件监听与热更新

webpack 中的配置对象无效

webpack 配置文件在 vue-cli webpack 项目中的位置?