webpack 引入样式 与 使用ExtractTextPlugin插件

[5Mi]

使用webpack打包代码可以将各种类型的文件当做模块,即样式,图片都可以当做模块被require()进来,对于样式文件来说,好像是将样式文件通过相应的loader转化为字符串打包到js文件中,再由js生成style标签将样式放在style标签中插入到head标签中,这样做缺点是会使js文件体积变大

而通过extract-text-webpack-plugin插件则可以将样式从js中抽出,生成单独的.css样式文件(根据entry入口),通过link标签引入.优缺点:

Advantages:

• Fewer style tags (older IE has a limit)
• CSS SourceMap (with devtool: "source-map" and css-loader?sourceMap)
• CSS requested in parallel
• CSS cached separate
• Faster runtime (less code and DOM operations) Caveats:
• Additional HTTP request
• Longer compilation time
• More complex configuration
• No runtime public path modification
• No Hot Module Replacement 主要缺点应该是涉及资源引用加载,和无法热更新(配置了热更新的话想要看效果就得手动刷新)

  使用 extract-text-webpack-plugin

一般将整个项目的大的公共样式集,通过入口js引入,再通过此插件提取,然后在html或模板中引入

一个大的公共样式集

入口js引入

//ExtractTextPlugin.extract()中第一个参数是可选项一般是style-loader (第一个参数的文档说明为:notExtractLoader (optional) the loader(s) that should be used when the css is not extracted
//,即css不提取时的loader,通过style-loader可以将css用style标签放到头部)
{test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css?'+(DEBUG?'sourceMap':'')+'!postcss')},
{test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?'+(DEBUG?'sourceMap':'')+`!postcss!sass?`+(DEBUG?'sourceMap':'')+'')},

• vue文件使用 在webpack.config.js中配置vue-loader

// vue-loader configurations
    vue: {
        // configure autoprefixer
        autoprefixer: {
            browsers: [
                'last 3 versions',
                'ie >= 8',
                'ff >= 30',
                'chrome >= 31'
            ]
        },
        //vue-loader config  主要是这里,开发时不用这个(由于不得不手动刷新)
        loaders: {
            css: DEBUG ? 'style!css' : ExtractTextPlugin.extract("css"),
            sass: DEBUG ? "style!css!sass" : ExtractTextPlugin.extract("css!sass")
        }
    },

[catt-wuyang]

请问用的是sublime的编辑器么，用的是什么主题呀，好好看

[5Mi]

@muzidx 抱歉才看到 用的webstorm哦 Material Theme UI 在webstorm插件中搜就能搜到

[kerwin-ly]

@5Mi 打包后的样式出来了。但是怎么引入呢？如果在main.js入口位置引入，那生产环境可能报错呀

[5Mi]

@kerwin1 额 没太明白你的意思 但我这里表达的是 开发环境中 webpack 不需要配置 extract-text-webpack-plugin 插件 像这样

rules:[
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            'scss': ['style-loader',cssLoader,'sass-loader',sassResourcesLoader]
          }    
        }
      },
      {
        test: /\.scss$/,
        use: ['style-loader',cssLoader,'postcss-loader','sass-loader',sassResourcesLoader]        
      },
...

生产环境的打包配置里才使用extract-text-webpack-plugin 将样式文件统一提取

// 这里 const ExtractTextPlugin = require("extract-text-webpack-plugin");
// const appCssExtractTextPlugin = new ExtractTextPlugin('css/app.[contenthash].css');
rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            'scss': appCssExtractTextPlugin.extract({
              use: [cssLoader,'postcss-loader','sass-loader',sassResourcesLoader],
              fallback: 'vue-style-loader' 
            })
          }     
        }
      },
      {
        test: /\.scss$/,
        loader: appCssExtractTextPlugin.extract({
          use: [cssLoader,'postcss-loader','sass-loader',sassResourcesLoader],
          fallback: 'style-loader'
        })
      },
...
plugins:[
...
    // 别忘了plugins中声明使用
    appCssExtractTextPlugin,
]

引入的话就可以在入口js处引入, 你说的生产环境可能报错 是指什么?

[kerwin-ly]

@5Mi 明白了。谢谢。