鍍金池/ 問答/HTML/ webpack打包 出現(xiàn) webpackjasonp not defined

webpack打包 出現(xiàn) webpackjasonp not defined

webpack打包 出現(xiàn) webpackjasonp not defined

var webpack = require("webpack");
var path = require("path");
var htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry:  { 
       app:'./src/app.js',
       a: './src/scripts/a.js',
       b: './src/scripts/b.js',
       jquery:'jquery',
       vue:'vue'
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/[name].js',
        publicPath: '/temp/'   //上線的絕對路徑
    },
    //插件
    plugins: [

        new webpack.ProvidePlugin({ //加載jq
            $: 'jquery',
            vue:'vue'
        }),    

        new webpack.optimize.CommonsChunkPlugin({
            name: ['jquery','vue'], // 將公共模塊提取,生成名為`vendors`的chunk
            filename: 'assets/js/[name].min.js', // 路徑
            minChunks:2
        }),

        new htmlWebpackPlugin({       //根目錄的index.html生成dist下的html,可以多個(gè)生成
            filename: 'index.html',
            template: './src/page/index.html',
            inject: 'body', 
            chunks:['app','a','jquery','vue']           //script標(biāo)簽的放置
        }),
        
        new htmlWebpackPlugin({       
           filename: 'b.html',
           template: './src/page/b.html',  
           inject: 'body',
           chunks:['b','jquery','vue']       
        }),
        new htmlWebpackPlugin({       
           filename: 'a.html',
           template: './src/page/a.html',  
           inject: 'body',
           chunks:['a','jquery','vue']       
        }),

        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: [     //瀏覽器自動補(bǔ)全前綴
                    require("autoprefixer")({
                        browsers: ["last 5 versions"]
                    })
                ]
            }
        })

     

    ],
    module: {
        rules: [   
            //處理js中的loader
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: path.resolve(__dirname, '/src'),               //指定打包的文件
                exclude: path.resolve(__dirname, '/node_modules')      //排除打包的文件,加速打包時(shí)間
            },
            //處理css中的loader
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader?importLoaders=1!postcss-loader'  //@import進(jìn)來的樣式在問號后加 
            },
            //處理sass中的loader
            {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!postcss-loader!sass-loader'
            },
            //處理html模板中的loader
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            //處理ejs模板中的loader,以.tpl后綴結(jié)尾的
            {
                test: /\.tpl$/,
                loader: 'ejs-loader'
            },
            //處理圖片中的loader,file-loader,url-loader,image-webpack-loader相互配合(圖片格式轉(zhuǎn)換base64 圖片壓縮)
            {
                test: /\.(png|jpg|gif|svg)$/i,  //模板中的圖片放相對路徑: src="${require('../imgs/aaa.jpg')}"
                loader: 'url-loader'
            }
        ]
    },
    //使用webpack-dev-server,提高開發(fā)效率
    devServer: {
        contentBase: path.resolve(__dirname,'./dist/'),
        host: 'localhost',
        port: 9090, //默認(rèn)8080
        inline: true, //可以監(jiān)控js變化
        hot: true //熱啟動
    }
}
回答
編輯回答
病癮

看看控制臺,是不是代碼有語法錯誤

2018年2月7日 01:45