极客观点
项目管理
HarmonyOS
编译后代码
(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');
//只有触发事件才回家再对应的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')
//只有触发事件才回家再对应的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;
}();
哪里没有执行