javascript 示例webpack 4配置

Posted 2021-05-04

var webpack = require('webpack');
var path = require('path');
var CleanWebpackPlugin = require("clean-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
var merge = require('webpack-merge');
var common = require('./webpack.config.js');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")


module.exports = merge(common, {
  output: {
    publicPath: "./"
  },
  devtool: "inline-source-map",
  devServer: {
    contentBase: path.resolve(__dirname, "dist"),
    port: 9000,
    disableHostCheck: true,
    host: "localhost"
  },
  plugins: [
    new OptimizeCssAssetsPlugin(
      {
        assetNameRegExp: /\.css$/,
        cssProcessor: require("cssnano"),
        cssProcessorOptions: { discardComments: { removeAll: true } },
        canPrint: true
      },
      {
        copyUnmodified: true
      }
    ),
    new UglifyJsPlugin({
      sourceMap: true,
      uglifyOptions: {
        ecma: 8,
        compress: {
          warnings: false,
          drop_console: true,
          booleans: false,
          loops: false
        },
        output: {
          comments: true,
          beautify: true
        }
      }
    })
  ]
});

var webpack = require('webpack');
var path = require('path');
var merge = require('webpack-merge');
var common = require('./webpack.config.js');

module.exports = merge(common, {
    devtool: 'eval',
    devServer: {
        contentBase: './dist',
      //  hot: true,
        port: 9000,
       // disableHostCheck: true,
        host: 'localhost',
    }
});

const webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var path = require('path');
//var ExtractTextPlugin = require("extract-text-webpack-plugin");
//var extractCSS = new ExtractTextPlugin("assets/css/[name]-one.min.css");
//var extractSASS = new ExtractTextPlugin("assets/css/[name]-two.min.css");

module.exports = {
  //context: __dirname + "./src",
  entry: {
   //app: ['./src/index.js'],
    main: path.resolve(__dirname, "./src/index.js")
  },
  output: {
    path: __dirname + "dist",
    publicPath: "/",
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      { test: /bootstrap\/dist\/js\/umd\//, loader: "imports?jQuery=jquery" },
      { test: /\.css$/, loader: "style-loader!css-loader" },
      { test: /\.less$/, loader: "style-loader!css-loader!less-loader" },
      {
        test: /\.scss$/,
        use: [
          {
            loader: "style-loader" // creates style nodes from JS strings
          },
          {
            loader: "css-loader" // translates CSS into CommonJS
          },
          {
            loader: "sass-loader" // compiles Sass to CSS
          }
        ]
      },
      {
        test: /\.html$/,
        use: {
          loader: "html-loader",
          options: {
            minimize: true,
            removeComments: false,
            collapseWhitespace: false
          }
        }
      },
      {
        test: /\.(gif|jpg|png|ico)\??.*$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 1024,
            name: "[name].[ext]",
            publicPath: "../../",
            outputPath: "assets/css/"
          }
        }
      },
      {
        test: /\.(svg|woff|otf|ttf|eot)\??.*$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 1024,
            name: "[name].[ext]",
            publicPath: "../../",
            outputPath: "assets/css/"
          }
        }
      }
    ]
  },
  externals: ["child_process", "anychart", "d3", "commonjs"],
  devtool: "eval-source-map",
  resolve: {
    extensions: ["*", ".js", ".jsx"]
  },
  plugins: [
    // new webpack.HotModuleReplacementPlugin(),
    //   extractCSS,
    //  extractSASS,
    new webpack.ExternalsPlugin("commonjs", ["electron"]),
    new webpack.ProvidePlugin({
      // inject ES5 modules as global vars
      $: "jquery",
      d3: "d3",
      electron: "electron",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      Popper: ["popper.js", "default"],
      Tether: "tether"
    })
  ],
    target: 'node'
};