webpack4 mini-css-extract-plugin vue组件 导出组件js和css 到文件

//webpack.config.js
var path = require('path')
var webpack = require('webpack')

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")


module.exports = {

  entry: function () { //开发模式和生产模式下不同的入口
    if (process.env.NODE_ENV == 'development'){
      return {
        'main': './src/main.js'
      }
    }
    else{
      return {
        'my-first-vue-component': './src/components/myFirstVueComponent/index.js'
      }
    }
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: process.env.NODE_ENV == 'development'? '/dist/':'./', //加入到html中外部文件的路径
    filename: '[name].js',
  },
  //optimization,判断是什么环境，如果直接 splitChunks ，只有在生产模式下才单独生成组件的js
  optimization:process.env.NODE_ENV == 'development'? {}:{
        minimize: false,
        splitChunks: {
          // 自动提取所有公共模块到单独 bundle
          chunks: 'all'

        }
      }
      ,
  plugins:[

    new VueLoaderPlugin(),



    new MiniCssExtractPlugin( //css 文件的插件和配置文件名格式
      {
        filename: 'css/[name].[contenthash:8].css',
        chunkFilename: 'css/[name].[contenthash:8].css'
      }
    ),
 
  ],
  module: {
    rules: [
      {
        test: /\.css|scss$/,
        // use: [
        //   'vue-style-loader',
        //   'css-loader'
        // ],
        use: [ //一定要这样设置才会生成外部的CSS https://github.com/webpack-contrib/mini-css-extract-plugin/issues/113
          MiniCssExtractPlugin.loader,
          'css-loader?sourceMap',
          'sass-loader?sourceMap'
        ]
      },
      {
        test: /\.vue$/,
        // loader: 'vue-loader',
        loader: [ //配置vue中css的提取
          {
            loader: 'vue-loader',
            options: {
              loaders: {
                scss: [
                  'vue-style-loader',
                  MiniCssExtractPlugin.loader,
                  'css-loader?sourceMap',
                  'sass-loader?sourceMap'
                ],
                css: [                   
                 'vue-style-loader',
                  MiniCssExtractPlugin.loader,
                  'css-loader?sourceMap'
                ]
              }
            }
          }
        ]

      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]',
          outputPath:'images/' , //打包后图片输出的位置　dist\images
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    // contentBase: './dist',
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  // devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  // module.exports.devtool = '#source-map' //不生成 .map
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new HtmlWebpackPlugin({ //外部的html文件，在文件中加入生成的js和css
      title: 'Multi Entry',
      template: './index.html',
      filename: 'index.html',
      chunks:['my-first-vue-component']
    }),
    // new webpack.optimize.UglifyJsPlugin({ //压缩
    //   sourceMap: true,
    //   compress: {
    //     warnings: false
    //   }
    // }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}
else{
  module.exports.devtool= '#eval-source-map'
}