构建vue+webpack项目，css和js怎么打包成两个文件

Question

用webpack打包vue项目的时候，怎么让js和style分开，打包分成两个文件呢？

Answer 1

使用extract-text-webpack-plugin使css独立出来

var ExtractTextPlugin = require('extract-text-webpack-plugin');
普通.css文件
{
    test: /\.css$/,
    loader: ExtractTextPlugin.extract('style', 'css', 'postcss')
}

.vue中的需要单独配置
vue: {
    loaders: {
      css: ExtractTextPlugin.extract('css'), 
      html: 'html-loader'
    }
}

最后，在plugins中添加
new ExtractTextPlugin("css/[name].css", { allChunks: true })
注意：如果使用了按需加载，一定要加入这句 { allChunks: true } ，不然css样式无效

Answer 2

extract-text-webpack-plugin

Answer 3

extract-text-webpack-plugin

webpack.config.js：

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    module: {
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract({
                fallbackLoader: "style-loader",
                loader: "css-loader"
            }) }
        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css")
    ]
}