Question

我认为这似乎源于不完全理解webpack，但我想将一个带有我所有导入的缩小文件导出到一个文件中。我的配置如下所示：

var debug = process.env.NODE_ENV !== "production";
var path = require('path');
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  // entry is already defined in gulpfile.js - leave this line commented out.
  // entry: "/app/js/script.js",
  devtool: debug ? "inline-sourcemap" : null,
  module: {
    rules: [{
      test: /\.js$/,
      use: 'babel-loader'
    }],
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        query  :{
          presets:['react','es2015']
        },
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    root: [path.resolve(__dirname, 'app'), path.resolve(__dirname, 'node_modules')],
    extensions: ['', '.js']
  },
  output: {
    path: __dirname + "public/javascripts",
    filename: "scripts.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ minimize: true, mangle: true }),
  ],
};

现在我的主要关注点是这一行：

new webpack.optimize.UglifyJsPlugin({ minimize: true, mangle: true }),

我的输出脚本文件如下所示：

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;
/******/
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };
...and it goes on

当我希望它是一个缩小的文件时，它看起来更像是：

console.log（“我在这里！”），$（function（）{$（“。expander”）。click（function（）{“block”！= $（this）.children（“。缩进 “）。CSS（” 显示器 “）？（$（本）。儿童（”。缩进 “）。CSS（” 显示 “ ”块“），$（本）。儿童（”。插入符号“）。addClass （ “reversedCaret”））：（$（本）。儿童（ “缩进 ”）的CSS（“ 显示”， “无”），$（本）。儿童（ “插入符号 ”）removeClass（“ reversedCaret” ））}），$（“。sub-expander，.caret”）。click（function（）{“More”！= $（“。sub-expander”）。text（）？$（“。sub-expander “）。text（”更多“）：$（”。sub-expander“）。text（”Show Less“）}），$（”。indented“）。click（function（e）{e.stopPropagation（） }）}）;

另外，我已经确认了uglify插件安装：

new_platform_prototype@1.0.0 /projects/new-platform-prototype

└── uglifyjs-webpack-plugin@1.0.1

我是否遗漏了关于webpack核心概念的内容？为什么我不能缩小所有包含的出口？这不是Webpack的重点吗？

webpack不是uglifying js

0 个答案: