webpack多页面打包后生成的js在浏览器没反应

/**
 * 功能:Webpack配置文件
 * 日期:2017-11-24
 **/

const webpack = require('webpack');
const path = require('path');
// CSS剥离
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
// CSS输出
const styles = new ExtractTextWebpackPlugin("css/[name].css");

// CSS压缩插件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const cssPress = new OptimizeCssAssetsPlugin();

// js文件压缩
const compress = new webpack.optimize.UglifyJsPlugin({
    comments: false,
    compress: {
        warnings: false
    }
});

// html文件编译,每个html文件都需单独new一次然后指定路径
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlCompileIndex = new HtmlWebpackPlugin({
    //输出路径
    filename: 'index.html',
    //输入路径
    template: 'dev/index.html',
    //指定本页面的js和css引用的文件,否则间全部引用
    chunks: ['index','common'],
    inject: 'body'
});
const HtmlCompileAdd = new HtmlWebpackPlugin({
    template:'dev/pages/add.html',
    filename:'pages/add.html',
    chunks: ['add'],
    inject: 'body'
});
const HtmlCompileChart = new HtmlWebpackPlugin({
    template:'dev/pages/chart.html',
    filename:'pages/chart.html',
    chunks: ['chart'],
    inject: 'body'
});
const HtmlCompileEdit = new HtmlWebpackPlugin({
    template:'dev/pages/edit.html',
    filename:'pages/edit.html',
    chunks: ['edit'],
    inject: 'body'
});
const HtmlCompileHome = new HtmlWebpackPlugin({
    template:'dev/pages/home.html',
    filename:'pages/home.html',
    chunks: ['home'],
    inject: 'body'
});
// 核心配置部分
module.exports = {
    //资源映射文件配置
    devtool: 'source-map',
    //入口文件配置(多个文件入口写成json形式单个写成数组)单个路径写法entry:'路径'
    entry: {
        index:['webpack-dev-server/client?http://localhost:8089/','./dev/js/index.js'],
        add:['webpack-dev-server/client?http://localhost:8089/','./dev/js/add.js'],
        chart:['webpack-dev-server/client?http://localhost:8089/','./dev/js/chart.js'],
        edit:['webpack-dev-server/client?http://localhost:8089/','./dev/js/edit.js'],
        home:['webpack-dev-server/client?http://localhost:8089/','./dev/js/home.js'],
        common:['webpack-dev-server/client?http://localhost:8089/','./dev/js/common.js']
    },
    //输出路径配置
    output: {
        //输出的路径文件名
        path: path.resolve(__dirname, "build"),
        //输出路径名字
        filename: 'js/[name].js',
        publicPath:'./'
    },
    //插件使用
    module: {
        rules: [
            // less编译
            {
                test: /\.(less|css)$/,
                use: ExtractTextWebpackPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader!less-loader"
                })
            },
            // 图片资源编译 (webpack第二版写法)
            {
                test: /\.(gif|jpg|png)$/,
                loaders: [
                    'url-loader?limit=8192&name=img/[name].[ext]'
                ]
            },
            //字体图表的处理
            {
                test: /\.(woff2?|svg|eot|ttf)$/,
                loader: 'file-loader',
                options: {
                    publicPath: 'build/',
                    name: 'fonts/[name].[ext]'
                }
            },
            // 用babel编译js
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            },
            //html编译
            {
                test: /\.html/,
                loader: 'html-loader',
            //    路径在实例化的时候定
            }
        ]
    },
    //本地server配置
    devServer: {
        contentBase: path.resolve(__dirname, './'),//本地服务器所加载的页面所在的目录
        port:8089,//本地服务端口配置
        hot:true,
        open:true,
        historyApiFallback: true,//不跳转
        inline: true,//实时刷新
        publicPath: '/'
    },
    //插件调用
    plugins: [styles,HtmlCompileIndex,HtmlCompileAdd,HtmlCompileChart,HtmlCompileEdit,HtmlCompileHome]
    //插件调用(上线版压缩)
    // plugins: [styles,HtmlCompileIndex,HtmlCompileAbout,cssPress,compress]

};

请输入代码

clipboard.png目录结构

clipboard.png浏览器能查看到css,样式都是正常的 但js就是不出来

clipboard.pnghtml文件main中间那块是动态添加的

阅读 2.5k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题