类似这种方式,动态再render中设定ref是可以获取的,但是让lazilyLoad一封装ref就不生效了,可是其他的props是有的,不明白发生了什么.. 没有用过这个组件的可以看下面LazilyLoad的组件. import React from 'react'; /** * @function 支持异步加载的封装组件 */ class LazilyLoad extends React.Component { constructor() { super(...arguments); this.state = { isLoaded: false, }; } componentWillMount() { this.load(this.props); } componentDidMount() { this._isMoun
以下是关于 webpack2 的编程技术问答
用webpack2打包时提示如下错误 文件结构和webpack配置文件如下 webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin') const webpack = require('webpack') module.exports = { entry: './src/index.js', output: { filename: './src/index.js', }, module: { rules: [ { test: /\.ts$/, loader: "ts-loader", exclude: "/node_modules/", }, { test: /\.html$/, loader: "html-loader",
问 题 // index.js const a = require('./a') a.a1(); //a.js exports.a1 = function () { console.log('a1'); } exports.a2 = function () { console.log('a2'); } exports.a3 = function () { console.log('a3'); } // webpack.config.js var webpack = require('webpack'); module.exports = { entry: {"index":"./index.js"}, output: { filename : '[name].js', }, module: { rules: [ ] }, resolve: {
我以前用的是我自己的webpack多页脚手架(Array-Huang/webpack-seed),最近开始用vue-cli的webpack模板,发现了一个问题:我感觉报的错老是被“吃掉”了,也不知道是被vue吃掉了还是被webpack某个plugin吃掉了,看console里的报错完全看不出来是哪里的问题: 我之前用自己的webpack脚手架来写vue都能报出来是具体哪一行出的错,然后出的什么错,怎么换了用vue-cli的模板就不行了呢? 我在猜测这到底是哪个webpack配置的问题呢?还是说我现在改成单页模式以后,代码都是异步加载(require.ensure())的缘故?
第一次用vue做项目,开发的时候是通过axios向后端发请求获取数据的,所以涉及到跨域的问题,谷歌之后发现vue提供了proxyTable设置跨域的访问问题,设置之后,可以正常拿到数据了,配置如下: 访问的时候通过设置vue全局变量,如下get请求: Vue.prototype.HOST = '/api'; Vue.prototype.GRAD_HOST = '/grad'; created () { let appId = this.Utils.getIds().appId; let openId = this.Utils.getIds().openId; let url = this.HOST + '/market/customerVIPList.htm?openId='+openId+'&appId='+appId; this.$vux.loading.show({text: '加载中'}); this.$http.get(u
例如如上图,无法知道这个css类是在哪个文件的哪一行, 在js 里面 import 代码 import 'material-design-icons/iconfont/material-icons.css' webpack { test: /\.(css|scss|sass)$/, loader: "vue-style-loader!css-loader!sass-loader" }, devtool: '#cheap-module-eval-source-map' vue-loader 选项 loaders: { css: 'vue-style-loader!css-loader', scss: 'vue-style-loader!css-loader!sass-loader', }, 还有写在 .vue 里面的 style 又该怎么显示指定行?
问 题 这两天试着把我的脚手架项目webpack-seed升级到webpack2,发现了一个问题:我用来兼容jquery插件的expose-loader在webpack2的环境下报错了。 由于expose-loader最近并未更新,所以更别提更新官方文档了,github上放着的还是webpack1时的示例代码,所以我是这么用的: { test: require.resolve('jquery'), loader: 'expose-loader?$', options: { $: true, }, }, 然后编译打包的时候就报了如下的错误: ERROR in ./~/jquery/dist/jquery.js Module build failed: TypeError: this.query.substr is not a function at Object.module.
问 题 gulpfile.js 配置文件 var gulp = require('gulp'); var webpack = require('webpack-stream'); var named = require('vinyl-named'); gulp.task('default', function () { return gulp.src('./resource/js/app.js') .pipe(webpack( require('./webpack.config.js') )) .pipe(gulp.dest('./public/js/')); }); webpack.config.js 配置文件 module.exports = { entry : './resource/js/app.js', output : { filename : 'bundle.js' },
错误提示是这个 代码结构: 代码: 1.webpack.config.js var path=require('path'); module.exports={ entry:{ index:'./web/main.js', }, output:{ path:path.resolve(__dirname,'dist'), filename:'[name].js' }, } 2.main.js require(['demo2/demo2.js'],function(demo2){ console.log(demo2.sum) }) 3.demo2/demo2.js define(['../demo1/demo1.js'],function(demo1){ var sum; var num=demo1.num; sum=num+1;
1.package.json "devDependencies": { "@types/jasmine": "2.5.36", "@types/node": "^6.0.45", "angular2-template-loader": "^0.6.0", "autoprefixer": "^7.1.1", "awesome-typescript-loader": "^3.0.4", "css-loader": "^0.26.1", "extract-text-webpack-plugin": "^2.1.0", "file-loader": "^0.9.0", "html-loader": "^0.4.3", "html-webpack-plugin": "^2.16.1", "jasmine-core": "^2.4.1", "karma": "^1.2.0", "karma-
问 题 在用vue-cli+webpack官方提供的那一套,最后执行 npm run build 时,我有的js文件不需要进行打包,只是需要在生成的index.html文件中引入即可。该如何配置“配置文件”? 解决方案 这些文件放到 static 目录下,然后在 index.html 里直接使用 script 标签引入即可,引入路径是 /static/xxx.js。 这些文件声明全局变量、函数的话,在 .eslintrc.js 中配置 globals,然后在需要用到的地方直接使用就可以了。 globals 是一个对象,对象键名是可以全局使用的变量、函数名,键值为 true 表示该变量可读写,false 表示只读(不会出来在赋值语句的等式左侧)。 举例如下: "globals": { "globalVar1": true, "jQuery": false, "$": false } 也可以直接在 js 代码中通过注释声明 global
这两天学习使用webpack,尝试把vue,vue-resoucese,mdui,还有自己写的main.js和style.css打包成bundle.js,打包成功没有报错,但是vue会在console报错不能用,很疑惑,来请教一下大家 入口main.js 但是html引入bundle.js后vue是报错的,console页面如下 这里是webpack的配置文件 var webpack = require('webpack'); var path = require('path'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, "dist"), filename: 'bundle.js' }, module: { loaders: [ {
问 题 webpack2中使用babel-loader转化es6代码,但是最后的bundle.js中并没有看到预期的结果,还是存在es6的语法,let,函数参数默认值等情况。。 以下是我的webpack的配置部分: var path = require("path"); var vuxLoader = require('vux-loader'); var webpack = require('webpack'); function resolve (dir) { return path.join(__dirname, '..', dir) } var webpackConfig = { entry: { // app: ["./app/cart.js"] app: ["./app/goodsDetail.js"] // app: ["./app/center.js"] }, output