zoukankan      html  css  js  c++  java
  • 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")
        ]
  • 相关阅读:
    hdu 1164 Eddy's research I
    hdu 3794 Magic Coupon
    hdu 1460 完数
    hdu 1201 18岁生日
    求一组整数中所有素数之和
    备忘录
    c判断括弧是否匹配
    N!大整数阶乘问题
    计算一个人从出生到现在活了多少天
    java web.xml配置详解(转)
  • 原文地址:https://www.cnblogs.com/hjdjs/p/7221333.html
Copyright © 2011-2022 走看看