极客观点
项目管理
HarmonyOS
Uncaught TypeError: __webpack_require__(...) is not a function
webpack.config.js
var webpack = require('webpack'); var path = require('path'); var fs = require('fs'); var AssetsPlugin = require('assets-webpack-plugin'); var assetsPluginInstance = new AssetsPlugin(); var proxy = require('http-proxy-middleware'); //配置远程路径 var remotePath = "./__build__/"; fs.readdir(remotePath, function (err, files) { if (!err) { for (var i = 0; i < files.length; i++) { var filesName = files[i]; if (filesName.indexOf("chunk.js") > 1) { fs.unlink('./__build__/' + filesName) } } } else { console.warn(err); } }); module.exports = { entry: { bundle: "./web_app/index.js" }, output: { path: __dirname + '/__build__', filename: '[name].js', chunkFilename: (new Date()).getTime() + '[id].chunk.js', publicPath: '/__build__/' }, devtool: 'cheap-module-eval-source-map', // 解决跨域问题 devServer: { hot: true, inline: true, proxy: { '*': { changeOrigin: true, //target: 'xxx', target: 'xxx', secure: false } } }, plugins: [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV), }, }), new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./__build__/dll/lib-manifest.json') }), // 部分代码 new AssetsPlugin({ filename: '__build__/webpack.assets.js', processOutput: function (assets) { return 'window.WEBPACK_ASSETS = ' + JSON.stringify(assets); } }), new webpack.ProvidePlugin({ //加载jq $: 'jquery', jQuery: 'jquery' }), // new webpack.optimize.UglifyJsPlugin({ // //压缩代码 // mangle: { // except: ['$super', '$', 'exports', 'require'] // }, // compress: { // warnings: false, // }, // output: { // comments: false, // }, // }), new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurenceOrderPlugin() ], resolve: { extensions: ['', '.js', '.jsx'], resolve: { alias: { moment: "moment/min/moment-with-locales.min.js" } } }, module: { loaders: [ { test: /\.jsx?$/, // loaders: ['babel-loader?presets[]=es2015&presets[]=react&presets[]=stage-0'], loader: 'babel-loader', query: { plugins: ["transform-object-assign", "add-module-exports"], presets: ['es2015', 'stage-0', 'react'] }, include: path.join(__dirname, '.') }, { test: /\.css$/, loader: 'style!css' }, { test: /\.less$/, loader: 'style!css!less' }, { test: /\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/, exclude: /^node_modules$/, loader: 'file-loader?name=[name].[ext]' }, { test: /\.(png|jpg)$/, exclude: /^node_modules$/, loader: 'url?limit=500&name=[name].[ext]' //注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片 } ] } };package.json
{ "name": "xxx", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dll": "webpack --config dll.config.js", "start": "npm run dev", "dev": "webpack-dev-server --progress --colors --host 0.0.0.0 --port 8888 --inline --hot", "build": "webpack" }, "author": "", "dependencies": { "antd": "^2.9.3", "compression": "^1.6.1", "cross-env": "^1.0.8", "echarts": "^3.1.1", "echarts-for-react": "^1.2.5", "echarts-wordcloud": "", "element-resize-event": "^2.0.5", "es6-promise": "^4.0.5", "eslint": "^1.10.3", "eslint-plugin-babel": "^3.0.0", "eslint-plugin-react": "^3.11.3", "extract-text-webpack-plugin": "^1.0.1", "flux": "^3.1.0", "fullcalendar": "", "history": "^3.0.0", "isomorphic-fetch": "^2.2.1", "jqGrid": "^5.1.1", "jquery": ">=2.1.4", "md5": "^2.2.1", "moment": "^2.15.1", "object-assign": "^4.1.0", "rc-pagination": "^1.6.2", "rc-time-picker": "", "react": "^15.4.1", "react-addons-create-fragment": "^15.4.1", "react-addons-shallow-compare": "", "react-addons-test-utils": "^15.4.1", "react-adsense": "^0.0.1", "react-datepicker": "^0.39.0", "react-dom": "^15.4.0", "react-router": "^3.0.0", "react-select2-wrapper": "", "react-test-renderer": "^15.4.0", "uxcore": "^0.14.2" }, "devDependencies": { "assets-webpack-plugin": "", "babel-cli": "^6.6.0", "babel-core": "^6.18.2", "babel-eslint": "^5.0.0-beta4", "babel-loader": "^6.2.8", "babel-plugin-add-module-exports": "^0.2.1", "babel-plugin-transform-es3-member-expression-literals": "*", "babel-plugin-transform-es3-property-literals": "*", "babel-plugin-transform-object-assign": "^6.22.0", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0", "babel-preset-react-hmre": "^1.0.0", "babel-preset-stage-0": "^6.16.0", "bundle-loader": "^0.5.4", "css-loader": "^0.26.0", "element-resize-event": "^2.0.5", "express": "^4.14.0", "express-urlrewrite": "^1.2.0", "file-loader": "^0.9.0", "html-webpack-plugin": "^2.24.1", "http-proxy-middleware": "", "jest-cli": "^17.0.3", "jsx-loader": "^0.13.2", "less": "^2.5.3", "less-loader": "^2.2.2", "open-browser-webpack-plugin": "0.0.3", "react-addons-css-transition-group": "^15.3.0", "react-load-script": "0.0.3", "storybook": "", "style-loader": "^0.13.1", "url-loader": "^0.5.7", "webpack": "^1.13.3", "webpack-dev-middleware": "^1.6.1", "webpack-dev-server": "^1.16.2", "ztree-for-react": "^0.1.5" }, "license": "ISC" }dll.config.js
const webpack = require('webpack');
const path = require("path");
const vendors = [
'react',
'react-dom',
'react-router',
"echarts",
"moment",
"fullcalendar",
"rc-time-picker",
"flux",
"react-datepicker",
'antd',
'element-resize-event',
'jquery'
];
module.exports = {
// output: {
// filename: '[name].dll.js',
// path: path.resolve(__dirname + "/__build__", './output/dll'),
// library: "[name]"
// },
output: {
filename: '[name].dll.js',
path: path.resolve(__dirname + "/__build__", './dll'),
library: "[name]"
// path:path.resolve( __dirname, './output/dll/[name]-manifest.json'),
// name:"[name]"
},
entry: {
"lib": vendors,
},
plugins: [
new webpack.DllPlugin({
path: path.resolve(__dirname + "/__build__", './dll/[name]-manifest.json'),
name: "[name]"
}),
new webpack.optimize.UglifyJsPlugin({minimize: true, output: {comments: false}})
]
};
出现这个问题的执行顺序
1、webpack --config dll.config.js
2、npm start
3、启动成功，但是输入 http://localhost:8888 访问的时候报错
附上项目目录结构图：
根据报错找到出错代码位置，应该是业务代码里require的一个lib的值不是function，却执行了function的操作导致的，例如：