webpackJsonp is not defined?

用了CommonsChunkPlugin生成了公共文件,但是页面还没有引用这个公共文件

比如下面这个配置

var webpack = require(‘webpack‘);
var path = require(‘path‘);
var buildPath = path.resolve(__dirname,"build");
// var nodemodulesPath = path.resolve(__dirname,‘node_modules‘);

var config = {
    //入口文件配置
    entry:{
        // app:path.resolve(__dirname,‘src/main.js‘),
        main:path.resolve(__dirname,‘src/main.js‘),
        main1:path.resolve(__dirname,‘src/main1.js‘),
        common: ["./src/js/common"] //【1】注意这里
      },
    resolve:{
        extentions:["","js"]//当requrie的模块找不到时,添加这些后缀
    },
    //文件导出的配置
    output:{
        path:buildPath,
        filename:"[name].js"
    },
    // module: {
    //     loaders: [{
    //         test: /\.(js|jsx)$/,
    //         loaders: [‘babel‘],
    //         exclude: /(node_modules|bower_components)/
    //         //排除不处理的目录
    //     }]
    // },
    plugins: [
        new webpack.DefinePlugin({
          ‘process.env‘: {
            ‘NODE_ENV‘: ‘"production"‘
          }
        }),
         //【2】注意这里  这两个地方市用来配置common.js模块单独打包的
         new webpack.optimize.CommonsChunkPlugin({
            name: "common",//和上面配置的入口对应
            filename: "commonFun.js"//导出的文件的名称
        })
         //压缩打包的文件
        // new webpack.optimize.UglifyJsPlugin(),
        // new webpack.optimize.OccurenceOrderPlugin(),
        // new webpack.optimize.AggressiveMergingPlugin(),
         //允许错误不打断程序
        // new webpack.NoErrorsPlugin()
    ]
}

module.exports = config;

  

生成了公共的文件,文件名为commonFun.js,需要在index.html里首先引入commonFun.js,然后再引入打包的js文件才行

时间: 2024-10-18 04:42:33

webpackJsonp is not defined?的相关文章

vue项目报错webpackJsonp is not defined

在vue单页面应用中,我们大概都会使用CommonsChunkPlugin这个插件. 传送门 CommonsChunkPlugin 但是在项目经过本地测试没有任何问题,打包上线后却会报错 webpackJsonp is not defined.这是因为公共文件必须在自己引用的js文件之前引用. 可以手动改文件引用,但是推荐以下解决办法: 找到build→webpack.prod.conf.js→找到HtmlWebpackPlugin插件,添加如下配置即可 chunks: ['manifest',

webpackJsonp is not defined

vue项目,发现有这报错. 原因是用了CommonsChunkPlugin生成了公共文件,但是页面还没有引用这个公共文件 使用vue-cli2: 在文件build/webpack.prod.conf.js,添加 chunks: ['manifest', 'vendor', 'app'], new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true, minify: { rem

vue项目使用 prerender-spa-plugin 预渲染

由于项目要做seo优化,而用vue写成的spa页面谷歌浏览器等是抓取不到数据的.介于ssr和预渲染来说,后者相对来说要简单许多.所以采用了预渲染方式.采用插件prerender-spa-plugin使用 第一步:修改配置文件webpack.prod.conf.js 在 const webpackConfig = merge(baseWebpackConfig, {plugins: [ new webpack.DefinePlugin({ new PrerenderSpaPlugin(// Req

jQuery.attr() 源码解读

我们知道,$().attr()实质上是内部调用了jQuery.access方法,在调用时jQuery.attr作为回调传入.在通过种种判断(参看jQuery.access()方法)之后,取值和赋值最后调用了这个jQuery.attr方法. 所以,关键是看jQuery.attr这里怎么走了~~ 源码如下: attr: function( elem, name, value ) { var hooks, ret, nType = elem.nodeType; //如果elem不存在,或者是文本.注释

从0到1,教你实现基于Ruby的watir-webdriver自动化测试

一.为什么选择Ruby [1]完全开源. [2]多平台:Ruby可以运行在Linux, UNIX, Windows, MS-DOS, BeOS, OS/2.. [3]多线程:线程就是指在一个程序中处理若干控制流的功能.与OS提供的进程不同的是,线程可以共享内存空间. [4]完全面向对象. [5]不需要内存管理:具有垃圾回收(Garbage Collect, GC)功能,能自动回收不再使用的对象. [6]解释执行:其程序无需编译即可轻松执行. [7]功能强大的字符串操作/正则表达式. [8]具有异

解决Ajax 跨域问题 - JSONP原理解析

解决Ajax 跨域问题 - JSONP原理解析 为什么会有跨域问题? - 因为有同源策略 同源策略是浏览器的一种安全策略,所谓同源指的是 请求URL地址中的 协议, 域名 和 端口 都相同,只要其中之一不相同就是跨域 同源策略主要为了保证浏览器的安全性 在同源策略下,浏览器**不允许**Ajax跨域获取服务器数据 http://www.example.com/detail.html 跨域请求: http://api.example.com/detail.html 域名不同 http://www.

webpack2配置

详细的配置可以参考官网:https://doc.webpack-china.org/guides/ 一开始做项目时都是直接从组里前辈搭建好的脚手架开始写代码,到后来自己写新项目时又是拷贝之前的工程作为脚手架开始.对于脚手架本身却不甚了解,不仅不思考为什么更是没有改进的想法,怪不得工作满一年了却总觉得自己的技术水平在原地踏步,就是没有总结和思考. 目前组里的技术栈都是使用vue+koa,使用webpack的好处一是方便写vue的单文件组件,二是打包文件方便生产部署再加上能无所顾虑的应用语言的新特性

[转] 那些在使用webpack时踩过的坑

用webpack的过程,就是一个不断入坑和出坑的过程.回望来时路,一路都是坑啊!现把曾经趟过的那些坑整理出来,各位看官有福了~ 文章末尾有我用到的依赖的版本信息,若你发现某个问题与我在本文中的描述不一致时,可以看看是否版本与我所使用的不同所致. 一.Mac平台和Windows平台的差异导致的问题 1.路径上的差异 在配置entry选项的时候,我这么配置: entry: { main: __dirname + '/src/index.js' } 这样写在Mac下完全没有问题,但在Windows下会

前端判断是否APP客户端打开触屏,实现跳转APP原生组件交互之遐想

今天做了一个html的活动页面,本来马上就要完工,准备开开心心收尾,结果~... 产品突然提出需要说,要讲html中的某些交互和APP原生组件挂钩,心里一万头xxx奔过~ 静下心来思考 以往我们是判断是否客户端打开都依赖于后端,通过app主动拼接参数的方式,传递给后端,后端告诉前端本次的加载是在app里还是app外,实现页面的特殊功能 那我们发现,这个方式环节和局限性太多,我们无法保证客户端一定能够每个触屏页面都拼接我们需要的参数,而且我们的触屏页面有很多种,有的是活动需要的,有的是动态,有的是