请教一个 webpack 打包 .vue 的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 2800 天前的主题，其中的信息可能已经有所发展或是发生改变。

App.vue 的内容：

<template>
    <div id="app">
        <h1>APP</h1>
    </div>
</template>

main.js 的内容：

import Vue from 'vue';
import App from './App.vue';

new Vue({
    el: '#app',
    render: h => h(App)
});

webpack.config.js 已经配置了：

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.common.js'
    }
},

问题：

在打包之后的文件中，看到了下面这几行代码：

Component.options.__file = "E:\\XXX\\src\\App.vue"
if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key !== "__esModule"})) {console.error("named exports are not supported in *.vue files.")}
if (Component.options.functional) {console.error("[vue-loader] App.vue: functional components are not supported with templates, they should use render functions.")}

请问这是哪里配置差了什么？或者是哪里写错了？为啥会把 .vue 的物理路径都暴露出来了呢……

第 1 条附言 · 2017-03-26 16:43:34 +08:00

问题解决，一行一行对比了 vue 官方的 webpack-simple 之后发现了这个配置：

new webpack.LoaderOptionsPlugin({
    minimize: true
})

打包出来之后的文件就干净了

9 条回复 • 2017-03-27 15:44:35 +08:00

viko16

2017-03-26 16:21:53 +08:00

el: '#app' 指的是「一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标」，而不是单文件组件里面 template 中的内容喔..

Martox

2017-03-26 16:32:05 +08:00 via Android

没看懂楼上回复的是什么？ LZ 问的是打包。

2017-03-26 16:37:47 +08:00

@viko16 有的， index.html 中的内容是有 <div id="app"></div> 的

2017-03-26 16:44:10 +08:00

@viko16 @Martox 问题解决啦，见附言

loy6491

2017-03-26 17:11:10 +08:00

这个只会在开发模式下打包进去， build 的时候是没有的，其实不用管他。

var isProduction = this.minimize || process.env.NODE_ENV === 'production'

// development-only code
if (!isProduction) {
// add filename in dev
output += 'Component.options.__file = ' + JSON.stringify(filePath) + '\n'

https://github.com/vuejs/vue-loader/blob/master/lib/loader.js

code4life

2017-03-27 14:08:01 +08:00

@RE @loy6491
刚尝试了一下 webpack-simple 这个项目,直接跑的 demo, webpack 版本 v2.2.1
发现 webpack.config.js 中
module.exports.plugins = (module.exports.plugins || []).concat([
//[1]
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),

//[2]
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),

//[3] 此处是否注释、均不影响结果
new webpack.LoaderOptionsPlugin({
minimize: true
})
])

默认情况下打包后的情况是
build.js 83.1 kB

只注释掉[1]后
build.js 103 kB

只注释掉[3]后
build.js 83.1 kB

在[1]、[3]处都注释掉后
build.js 103 kB

感觉 new webpack.LoaderOptionsPlugin({
minimize: true
})
在 demo 中似乎没任何作用， minimize: false 也没效果。
build.js 也都是压缩过的，而且没楼主这样子出现 vue 文件的绝对路径的情况。

求指点！

loy6491

2017-03-27 15:05:41 +08:00

@code4life
如果你想在 webpack-simple 中单纯想复现楼主这个问题需要改 3 处
1. package.json
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
改为
"build": "cross-env NODE_ENV=prod webpack --progress --hide-modules"

2. webpack.config.js
if (process.env.NODE_ENV === 'production') {
改为
if (process.env.NODE_ENV === 'prod') {

3. webpack.config.js
注释掉你的[3]

loy6491

2017-03-27 15:27:23 +08:00

@code4life
83.1K 变成 103K 的原因是：
vue.js 源码里有很多警告信息，如果在 production 模式下会成为 dead code 而被压缩掉。
你去掉了 [1]，导致 vue.js 无法判断当前环境，这部分警告信息进入了 build.js ，体积变大。

code4life

2017-03-27 15:44:35 +08:00

@loy6491 感谢你的指点

> 如果你想在 webpack-simple 中单纯想复现楼主这个问题需要改 3 处

这个我之前也那么试过, 当时觉得 NODE_ENV=production 这个赋值还是会改变运行环境，从而影响了 var isProduction = this.minimize || process.env.NODE_ENV === 'production' 的值，就改成了 NODE_ENV=production2

这种情况下只注释[3] 结果是 build.js 85.3 kB [process.env.NODE_ENV === 'production' 成立]
注释[1][3]后，才会出现楼主的情况，此时 build.js 106 kB

经你提醒又尝试了只注释了[1],结果是 build.js 103 kB [this.minimize === true 成立]

> vue.js 源码里有很多警告信息，如果在 production 模式下会成为 dead code 而被压缩掉
这个知识点 get 了，受教！

new webpack.LoaderOptionsPlugin({
minimize: true
})
除了这个地方会受影响，其他好像没什么作用了？
看到一个说法是：
UglifyJsPlugin 不再压缩 loaders ，需要通过设置 minimize:true 。后续版本会逐渐移除
plugins: [
+ new webpack.LoaderOptionsPlugin({
+ minimize: true
+ })
]
不过不带理解上面的含义。