十三、webpack 拆分css

在上一节webpack打包stylus文件中可以看到打包后的css文件是以行内样式style的标签写进打包后的html页面中，如下图所示

css内嵌

如果样式很多的话，我们更希望直接用link的方式引入进去，这时可以使用 extract-text-webpack-plugin 这个插件把内嵌的css拆分出来

1. 在cmd中安装 extract-text-webpack-plugin 插件

npm install extract-text-webpack-plugin
// webpack4版本请用这条命令
npm install extract-text-webpack-plugin@next

2. 配置webpack.config.js文件

const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
module: {
    rules: [
      {
        test: /\.styl$/,
        use: ExtractTextWebpackPlugin.extract({
            // 将css用link的方式引入就不再需要style-loader了
            use: ['css-loader', 'stylus-loader']
        })
      }
    ]
  }, // 处理对应模块
plugins: [
        // 拆分后会把css文件放到dist目录下的css/style.css
        new ExtractTextWebpackPlugin('css/style.css')  
]

3.重新打包之后，我们发现css已被提取为单独的文件了

css拆分