win 下 package.json 与 webpack 配置容易被忽略的一个坑

linkin 发布于2019-08-21 17:13 / 3075人阅读

摘要：起因今天用打包的时候发现不加压缩居然比加上还要小，命令行分两次输入回车的时候是正常的。反复实验多次，打印也正常。拐回头看我们的代码我们来对比一下对错写法一个小失误，顺便附上我的翻版必究

起因

今天用webpack 打包的时候发现不加 set NODE_ENV 压缩居然比加上 set NODE_ENV 还要小，命令行分两次输入 set NODE_ENV=production (回车) webpack .... 的时候是正常的。反复实验多次，打印NODE_ENV 也正常。(如图)

加上 set NODE_ENV

不加 set NODE_ENV

配置项

debug

多次打印

大眼一看没什么问题,仔细看以下就会发现第一次的输出多了一个空格

原因

就是多了一个致命空格，导致我一下午时而压缩成功，时而压缩失败，非常灵异。
拐回头看我们的package.json 代码,我们来对比一下对错写法

wrong

correct

一个小失误，顺便附上我的 webpack.production.config.js

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry:__dirname + "/app/main.js",

    output: {
        filename:"bundle-[hash:8].js",
        path:__dirname+"/build"
    },

    module:{
        rules:[
            {
                test:/(.jsx|.js)$/,
                use:{
                    loader:"babel-loader"
                },
                exclude:/node_modules/

            },
            {
                test:/.css$/,
                use: ExtractTextPlugin.extract({
                       fallback: "style-loader",
                      use: [
                          {
                              loader:"css-loader",
                              options:{
                                  module:true
                              }
                          },
                          {
                              loader:"postcss-loader"
                          }

                      ]
                })
                    
            },
            {
                test:/(.jpg|.png)$/i,
                use:{
                    loader:"url-loader",
                    options:{
                        limit:5000,
                        name:"img/[name].[hash:8].[ext]"
                    }
                }
            }
        ]
    }
    ,
    plugins:[
        new webpack.BannerPlugin("翻版必究"),
        new HtmlWebpackPlugin({
            template:__dirname+"/app/index.tmpl.html"
        }),
        new webpack.HotModuleReplacementPlugin(),
        new ExtractTextPlugin("styles-[hash:8].css"),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            output:{
                comments:false
            },
            compress:{
                warnings: false
            }
        }),
        new webpack.DefinePlugin({
            "process.env":{
                "NODE_ENV":JSON.stringify(process.env.NODE_ENV)
            }
        }),
        new webpack.DefinePlugin({
              __DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == "dev") || "false"))
        }),
        new webpack.optimize.CommonsChunkPlugin({
              name: "vendor",
              filename: "./js/[name].[hash:8].js"
        }),

 
    ]

}

GPU云服务器云服务器 package.json 配置阿里云window服务器的一些坑备案网站容易被收录服务器容易被攻击

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89264.html

最小白的webpack+react环境搭建

摘要：接下来安装和，执行命令安装很顺利，没有遇到任何问题。再总结一下我们遇到的坑初始化时的项目名称要合规，特别是不能出现中划线下划线。另外再增加，这样刷新的速度会大大加快最终的文件目录结构为各文件的最终内容本文也同步发表在我的公众号“我的天空” 从零开始，用最少的配置、最少的代码、最少的依赖来搭建一个最简单的webpack+react环境。最近在玩webpack+rea...

番茄西红柿 2019-04-23 13:28 评论0 收藏0
用 vue2 和 webpack 快速建构 NW.js 项目(3)

摘要：增加文件这个文件主要做的事情就是整理出用的，然后再调用进行打包在中增加打包入口增加下面这一行代码在打包完成的回调中简单部就完成了打包，是不是异常清晰和简单。参见如果有就写上新增这个文件就是用来打包下安装包的。。。阅读本文需要一点 JS 基础和阅读的耐心，我特么自己写完后发现这文章咋这么长啊。。。如果你认真看完算我输！另我专门做了个 vue-nw-seed 项目，里面包含了我这篇...

史占广 2019-08-20 15:33 评论0 收藏0
Electron + vue 打包桌面操作流程

摘要：提前准备一个项目，也可以使用初始的项目安装到后边有的会出现报错，可以忽略，启动启动成功就可以在项目下执行下载以下依赖，会用到这个是打成文件的插件，之后要用，提前下载好获取的资源这里我用的是太慢了将获取到资源的复制到里面的里提前准备一个vue项目，也可以使用初始的vue项目vue init webpack 安装到后边有的会出现报错，可以忽略，启动npm run dev 启动成功就可以 ...

idealcn 2019-08-23 18:16 评论0 收藏0
Vue 2.0 项目创建+Element-ui+Less+typescript[巨详细+巨简单+踩过

摘要：安装完成之后，打开命令行工具，然后输入，输入和，如下图，如果出现相应的版本号，则说明安装成功。先说点什么刚从坑里爬出来,来和大家分享一下,也许我写的东西大部分文章都有,但是也有些新的东西,小白仔细看哦,大牛来了也请指点一二,也帮助我进步! 进入正题 Vue 2.0 项目的基本创建一.Vue 2.0 的环境搭建 1.node.js安装安装原因:Node.js 是一个服务器...

mj 2019-08-20 17:27 评论0 收藏0
Electron入门介绍

摘要：进程主进程在里，运行里脚本的进程被称为主进程。渲染进程由于使用来展示页面，所以的多进程结构也被充分利用。当一个实例被销毁后，相应的渲染进程也会被终止。在，我们提供用于在主进程与渲染进程之间通讯的模块。 Github 系列文章地址笔者前两天心血来潮做了个MACOS下可以进行OCR图文识别的小工具，发现Electron 在1.x之后API发生了挺大的变化，估计也是我好久没碰了，所以打算把这...

yunhao 2019-08-21 10:53 评论0 收藏0