webpack 错误信息汇总

最近在学习webpack，学习成长之路总是坎坎坷坷。总结一下学习中遇到的一些错误，主要是错误信息和解决方法。错误一：vue.js:515 [Vue warn]: Property or method "name" is not defined on the instance but referenced during render. Make sure to declare r

创优前端

5110人浏览 · 2018-03-19 13:33:39

创优前端 · 2018-03-19 13:33:39 发布

最近在学习webpack，学习成长之路总是坎坎坷坷。总结一下学习中遇到的一些错误，主要是错误信息和解决方法。

错误一：vue.js:515 [Vue warn]: Property or method "name" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)

name 在data那里没有定义。 
要这样定义：
export default {
    name: 'app',
    data() {
        return {
           name: ''
        }
    },
    ......

错误2：Do not mount Vue to or <body> - mount tonormal elements instead.

vue1.x 允许开发者以 <body> 或 <html> 作为根实体的挂载点，
但到了VueJS2.0 后，只能通过 独立的节点挂载 ，如:div 等。

否则会产生错误，警告讯息如下：
"Do not mount Vue to <html> or <body> - mount tonormal elements instead."

换成用独立的 DOM 节点，如 <divid="app"></div>，就可以正常运作了。

错误3： [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.(found in )

上述报错是发生在使用vue框架时,单纯的向Vue中绑定一个template,如下：
new Vue({
    el: '#app',
    template:"<div>wret</div>"
    // router,
    // render: h => h(App)
})
这是什么意思呢?
运行时构建不包含模板编译器，因此不支持 template 选项，只能用 render 选项，
但即使使用运行时构建，在单文件组件中也依然可以写模板，
因为单文件组件的模板会在构建时预编译为 render 函数。
上面一段是官方api中的解释。就是说，如果我们想使用template，
我们不能直接在客户端使用npm install之后的vue。此时，再去看查vue模块，添加几行

webpack.config.js中添加:
resolve: {
    alias: {
        'vue': 'vue/dist/vue.js'
    }
}
再运行，没错ok了。

错误4：webpack提示 [HMR] Hot Module Replacement is disabled

刷新页面提示：Uncaught Error: [HMR] Hot Module Replacement is disabled，页面中的内容没有渲染出来

webpack的配置（webpack.config.js）里面加这个：
plugins: [
    new webpack.HotModuleReplacementPlugin()
]

错误5：unknown property 'loaders'....

webpack v2 之后都用rules 了
loaders改为rules

错误5：Module build failed: TypeError: this._init is not a function

在一些Webpack的版本中，loader不能用简写省去 -loader 的形式。因此vue-loader应该使用全拼
的形式。 
webpack.config.js 文件应该改成这样：
{
    test: /\.vue$/,
    loader: 'vue-loader', /* 原来的'vue'改成'vue-loader' */
    options: {
      // vue-loader options go here
    }
},

错误6：WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (250 kB). This can impact web performance.

webpack.config.js 文件新增：
performance: {
  hints: false
}

错误7：The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

在Webpack中，提供了mode变量，用于配置运行环境，mode的值可以为
development，表示的是开发模式，或者是production，表示的是生产模式。
package.json文件修改配置项为：
"scripts": {
　　"dev": "webpack --mode development",
　　"build": "webpack --mode production"
}
npm run dev  这个时候dist里面的文件的不是压缩过的
是npm run build 这个时候dist的main.js就是压缩了的。

ReferenceError window is not defined

loader: ExtractTextPlugin.extract('style', 'css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded')

错误8：webpack 编译成功了但是没有生成的文件？？


webpack-dev-server只是个本地的文件服务器 它只是做文件服务 不做打包服务
webpack-dev-server不会生成文件的，只会在内存里，用webpack试试吧

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^