用Webpack4打包的JS為什么沒(méi)有執(zhí)行？

編譯后代碼

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["app"],{

/***/ "./index.js":
/*!******************!*\
  !*** ./index.js ***!
  \******************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


var p = document.querySelector('.p');
var btn = document.querySelector('.btn');
btn.addEventListener('click', function () {
    console.log('222');
    //只有觸發(fā)事件才回家再對(duì)應(yīng)的js 也就是異步加載
    __webpack_require__.e(/*! require.ensure */ 0).then((function () {
        var data = __webpack_require__(/*! ./test/test */ "./test/test.js");
        p.innerHTML = data;
    }).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
});

/***/ })

},[["./index.js","manifest"]]]);
//# sourceMappingURL=app.bundle.js.map

輸出HTML

<!doctype html>
<html lang="en">
<body>
<p class="p">Nothing yet.</p>
<button class="btn">click</button>
<script type="text/javascript" src="/app.bundle.js"></script></body>
</html>

入口文件 index.js

const p = document.querySelector('.p');
const btn = document.querySelector('.btn');
btn.addEventListener('click', function() {
    console.log('222')
    //只有觸發(fā)事件才回家再對(duì)應(yīng)的js 也就是異步加載
    require.ensure([], function() {
        const data = require('./test/test');
        p.innerHTML = data;
    })
})

引用文件 test.js

const data = 'success!';
export default data;

webpack 配置

'use strict';
const path = require('path');

var APP_PATH = path.resolve(__dirname, 'src');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

// const autoprefixer = require('autoprefixer');


const ENV = process.env.npm_lifecycle_event;
const isProd = ENV === 'build';

module.exports = function () {
    const config = {

        mode:'development',
        devtool : 'module-source-map',

        context: path.resolve(__dirname, 'src'),

        entry: {
            'app': path.resolve(APP_PATH ,'index.js'),
            //
            // 'vendor': [
            //      'angular',
            //     '@uirouter/angularjs',
            //     // 'angular-resource',
            //     // 'mobile-angular-ui',
            //     // 'ng-dialog',
            //     // 'ngtouch',
            //     // 'angular-ui-utils',
            //     // 'moment',
            //     // 'baidumap',
            //
            // ]
        },
        output: {
            path: path.resolve(__dirname,'dist'),
            publicPath: '/',
            filename: isProd ? '[name].[hash:8].js' : '[name].bundle.js',
            chunkFilename: isProd ? '[name].[hash:8].js' : '[name].bundle.js'
        },
        module: {

            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader'
                    }
                },

                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                },


                {test: /\.html$/, loader: 'raw-loader'},

                {
                    test: /\.(png|jpg|gif)$/,
                    use: [
                        {
                            loader: 'url-loader',
                            options: {
                                limit: 8192
                            }
                        }
                    ]
                }

            ]

        },
        optimization: {
            runtimeChunk: {
                name: "manifest"
            },
            splitChunks: {
                cacheGroups: {
                    commons: {
                        test: /[\\/]node_modules[\\/]/,
                        name: "vendor",
                        chunks: "all"
                    }
                }
            },
         },

        plugins: [


            new HtmlWebpackPlugin({
                template: path.resolve( APP_PATH, 'index2.html'),
                //inject        : 'body',
                chunks: ['commons.chunk', 'vendor', 'app'],
                chunksSortMode: 'dependency'
            }),
            new CleanWebpackPlugin(['dist']),



         ],




        devServer: {
            contentBase: 'src',
            historyApiFallback: true,
            port: 7070
        },
        resolve: {
            alias: {
                _components: path.resolve(APP_PATH, 'components'),
                _config: path.resolve(APP_PATH, 'config'),
                _assets: path.resolve(APP_PATH, 'assets'),
                _pages: path.resolve(APP_PATH, 'pages'),
                _services: path.resolve(APP_PATH, 'services')
            }
        }
    };





    return config;
}();

回答

編輯回答

命于你

哪里沒(méi)有執(zhí)行

2018年5月31日 15:18

編輯回答

空痕

沒(méi)有執(zhí)行建議console.log一下，單純的看源碼很難知道為什么沒(méi)執(zhí)行，而且也要看看打包過(guò)程中有沒(méi)有報(bào)錯(cuò)，webpack4我原來(lái)也是各種報(bào)錯(cuò)，后來(lái)還是轉(zhuǎn)為3了

2017年6月25日 11:54

編輯回答

故林

  new HtmlWebpackPlugin({
                template: path.resolve( APP_PATH, 'index2.html'),
                //inject        : 'body',
                chunks: ['commons.chunk', 'vendor', 'app'],

我這里 chunks 配錯(cuò)了，刪除就行了

2018年7月17日 13:39