javascript Webpack配置

Posted 2021-05-03

var path = require('path');
var glob = require('glob-all');
var webpack = require('webpack');
var inProduction = true;
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var PurifyCSSPlugin = require('purifycss-webpack');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var extractSass = new ExtractTextPlugin({filename: '[name].[contenthash].css'});

module.exports = {
  entry: './app/Resources/assets/js/vue/bootstrap.js',
  output: {
    filename: 'bundle.[hash].js',
    path: path.resolve(__dirname, './web/build'),
  },
  node: {
    fs: 'empty',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
        use: extractSass.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                url: true,
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: function() {
                  return [
                    require('precss'),
                    require('autoprefixer'),
                  ];
                },
              },
            },
          ],
          fallback: 'style-loader',
        }),
      },
      {
        test: /\.scss$/,
        use: extractSass.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                url: true,
              },
            },
            {
              loader: 'postcss-loader?sourceMap',
            },
            {
              loader: 'sass-loader',
            }],
          fallback: 'style-loader',
        }),
      },
      {
        test: /\.(png|jpg|gif)$/,
        loader: [
          {
            loader: 'url-loader?limit=1000',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new BrowserSyncPlugin({
      host: 'localhost',
      port: 3000,
      proxy: 'orange.dev',
    }),
    new CleanWebpackPlugin([
      path.join(__dirname, 'web/build'),
    ], {
      exclude: [],
      verbose: true,
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: inProduction,
    }),
    function() {
      this.plugin('done', stats => {
            require('fs').writeFileSync(
                path.join(__dirname, 'app/Resources/assets/manifest.json'),
                JSON.stringify(
                    {
                      jsBundle: stats.toJson().assetsByChunkName.main[0],
                      cssBundle: stats.toJson().assetsByChunkName.main[1],
                    },
                ),
            );
          },
      );
    },
    extractSass,
    new PurifyCSSPlugin({
      paths: glob.sync([
        path.join(__dirname, 'app/Resources/views/*/*/*.html.twig'),
        path.join(__dirname, 'app/Resources/views/*/*.html.twig'),
        path.join(__dirname, 'app/Resources/views/*.html.twig'),
        path.join(__dirname, 'src/ShopBundle/Resources/views/*.html.twig'),
        path.join(__dirname, 'src/ShopBundle/Resources/views/*/*.html.twig'),
        path.join(__dirname, 'src/ShopBundle/Resources/views/*/*/*.html.twig'),
      ]),
      minimize: inProduction,
      purifyOptions: {
        whitelist: [
          '.default-dropdown',
          '.active',
          '.selection',
          '.dropdown',
          '.menu',
          '.focus',
          '.no-pic'
        ],
      },
    }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: (inProduction)
            ? JSON.stringify('production')
            : JSON.stringify('development'),
      },
    }),
  ],
};

if (inProduction) {
  module.exports.plugins.push(
      new webpack.optimize.UglifyJsPlugin(),
  );
}