vue-node-editer/webpack.config.js

vue-node-editer

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const miniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const NODE_ENV = process.env.NODE_ENV
const isDev = NODE_ENV === 'development';
module.exports = {
  mode: isDev ? 'development' : 'production',
  devtool: isDev ? 'cheap-module-eval-source-map' : 'cheap-module-source-map',
  entry: NODE_ENV === 'npm' ? './src/index.js' : './src/main.js',
  output: {
    path: path.resolve(__dirname, NODE_ENV === 'npm' ? './build' : './dist'),
    filename: NODE_ENV === 'npm' ? 'index.js' : 'build.js',
    publicPath: '/',
    libraryTarget: 'umd',
    library: 'vue-cnname-avatar',
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    hot: true,
    port: '3000', //默认是8080
    historyApiFallback: true,
    quiet: false, //默认不启用
    inline: true, //默认开启 inline 模式，如果设置为false,开启 iframe 模式
    stats: "errors-only", //终端仅打印 error
    overlay: false, //默认不启用
    clientLogLevel: "silent", //日志等级
    compress: true //是否启用 gzip 压缩
  },
  module: {
    rules: [
      { test: /\.vue$/, loader: 'vue-loader' },
      {
        test: /\.js?$/,
        use: ['babel-loader'],
        exclude: file => (
          /node_modules/.test(file) &&
          !/\.vue\.js/.test(file)
        )
      },
      {
        test: /\.css$/,
        use: [miniCssExtractPlugin.loader, "css-loader", {
          loader: "postcss-loader",
          options: {
            ident: 'postcss',
            plugins: [
              require('autoprefixer')({
                "overrideBrowserslist": [
                  ">0.25%",
                  "not dead"
                ]
              }),
            ]
          },
        }],
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        use: [miniCssExtractPlugin.loader, "css-loader", {
          loader: "postcss-loader",
          options: {
            ident: 'postcss',
            plugins: [
              require('autoprefixer')({
                "overrideBrowserslist": [
                  ">0.25%",
                  "not dead"
                ]
              }),
            ]
          },
        }, 'sass-loader'],
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader',
        options: {
          esModule: false, // 不加的话会有这种情况 img属性src="[object Module]"
          limit: 1024 * 100, // 当大于100kb时候，将文件打包到publicPath中 
          outputPath: 'static/images', // 将文件打包到哪里
          publicPath: NODE_ENV === 'npm' ? 'build/static/images/' :NODE_ENV === 'development' ? 'static/images/':'dist/static/images/',
          name: '[name].[ext]'
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin([
      {
        from: 'public/js/*.js',//本地服务器所加载的页面所在的目录
        to: path.resolve(__dirname, 'dist', 'js'),
        flatten: true,
      },
    ]),
    new miniCssExtractPlugin({
      filename: 'css/[name].css' //个人习惯将css文件放在单独目录下
    }),
    new OptimizeCssPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new VueLoaderPlugin()
  ]
}

if (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'npm') {
  module.exports.devtool = '#source-map'
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    }),
  ])
} else {
  module.exports.plugins = (module.exports.plugins || []).concat([
    //数组 放着所有的webpack插件
    new HtmlWebpackPlugin({
      template: __dirname + '/public/index.html',
      filename: 'index.html', //打包后的文件名
    }),
  ])
}