我在使用webpack DLL插件为我工作时遇到了很多麻烦。它的工作原理是dll正在被提取，而其他的bundle大小正在减少，但是当在浏览器中运行时我得到以下错误：
module.js from dll-reference [name]:1 Uncaught TypeError: __webpack_require__(...) is not a function
at Object.../node_modules/webpack/buildin/module.js (module.js from dll-reference [name]:1)
at __webpack_require__ (bootstrap dff23196bbd9943d1e33:678)
at fn (bootstrap dff23196bbd9943d1e33:88)
at Object.../node_modules/node-libs-browser/node_modules/punycode/punycode.js (punycode.js:533)
at __webpack_require__ (bootstrap dff23196bbd9943d1e33:678)
at fn (bootstrap dff23196bbd9943d1e33:88)
at Object.../node_modules/url/url.js (url.js:24)
at __webpack_require__ (bootstrap dff23196bbd9943d1e33:678)
at fn (bootstrap dff23196bbd9943d1e33:88)
at Object.<anonymous> (client:6)
根据SO / github上有相同错误消息的文档和人员，我的配置似乎是正确的。
webpack.development.js：
let fs = require('fs')
let path = require('path')
let webpack = require('webpack')
const { extractLegacy, extractModules } = require('./extract-text')
let defaultConfig = require('./webpack')
module.exports = Object.assign({}, defaultConfig, {
cache: true,
devtool: '#source-map',
entry: Object.assign(defaultConfig.entry, {
'webpack-dev-server/hot/client?https://app.local.app:8080/':
'webpack-dev-server/client?https://app.local.app:8080/',
'dll.vendor': '../build/dll.vendor.js'
}),
devServer: {
hot: true,
inline: true,
disableHostCheck: true,
host: 'app.local',
headers: { 'Access-Control-Allow-Origin': '*' },
https: {
key: fs.readFileSync(path.join(__dirname, '../l ocalssl/server.key')),
cert: fs.readFileSync(path.join(__dirname, '../localssl/server.crt'))
},
stats: {
cached: false,
cachedAssets: false,
children: false,
chunks: false,
chunkModules: false,
chunkOrigins: false,
depth: false,
errors: true,
errorDetails: true,
hash: false,
maxModules: 0,
modules: false,
providedExports: false,
reasons: false,
source: false,
timings: false,
usedExports: false
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
}),
extractLegacy,
extractModules,
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new webpack.DllReferencePlugin({
manifest: require('../build/vendor.json'),
name: '[name]',
context: path.resolve(__dirname, '../')
})
]})
webpack.dll.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: {
vendor: [path.resolve(__dirname, './vendors.js')]
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: ['babel-loader?cacheDirectory']
}
]
},
output: {
path: path.resolve(__dirname, '../build'),
filename: 'dll.[name].js',
library: '[name]'
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '../build', '[name].json'),
name: '[name]'
})
],
resolve: {
modules: ['node_modules']
}
}
的package.json
{
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"dependencies": {
"@heroku/foreman": "^2.0.2",
"adm-zip": "^0.4.7",
"amqplib": "^0.5.2",
"autoprefixer": "7.1.3",
"aws-sdk": "^2.104.0",
"babel-cli": "6.16.0",
"babel-eslint": "^7.2.3",
"babel-loader": "6.2.5",
"babel-plugin-flow-react-proptypes": "^5.1.2",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-recharts": "1.1.0",
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.22.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "6.16.0",
"babel-preset-es2015-node": "^6.1.1",
"babel-preset-react": "6.16.0",
"basic-auth": "1.1.0",
"bcrypt": "^1.0.3",
"body-parser": "1.17.2",
"bookshelf": "0.10.4",
"bookshelf-cascade-delete": "2.0.1",
"bookshelf-paranoia": "0.9.0",
"bootstrap": "3.3.7",
"bunyan": "1.8.10",
"bunyan-middleware": "0.4.0",
"change-case": "3.0.1",
"cheerio": "^1.0.0-rc.2",
"classnames": "2.2.5",
"compression": "1.7.0",
"connect-flash": "0.1.1",
"connect-redis": "3.3.0",
"cookie-parser": "^1.4.3",
"cookies-js": "^1.2.3",
"cron": "1.2.1",
"css-loader": "0.28.4",
"csvtojson": "^1.1.7",
"date-holidays": "^1.2.0",
"deep-equal": "^1.0.1",
"deep-freeze": "^0.0.1",
"deserialize-error": "^0.0.3",
"draft-convert": "^1.4.8",
"draft-extend": "^1.5.0",
"draft-js": "^0.10.1",
"elasticsearch": "^13.0.1",
"email-templates": "^2.7.1",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-flow-vars": "^0.5.0",
"express": "4.16.0",
"express-request-id": "1.4.0",
"express-session": "1.15.3",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"flow": "^0.2.3",
"forever": "^0.15.3",
"helmet": "3.8.0",
"http-errors": "1.6.1",
"ignore-styles": "^5.0.1",
"immutable": "^3.8.1",
"isomorphic-fetch": "2.2.1",
"jackrabbit": "git+https://github.com/leonlau/jackrabbit.git#da554347132757cd81c39037dd527ee258d088b5",
"jsdom": "^11.5.1",
"json-loader": "0.5.4",
"json2csv": "^3.7.3",
"knex": "0.13.0",
"knex-migrate": "^1.3.0",
"less": "2.7.1",
"less-loader": "2.2.3",
"lodash": "4.16.4",
"md5": "^2.2.1",
"microtime-nodejs": "^1.0.0",
"moment": "2.15.2",
"moment-range": "^2.2.0",
"mongo": "0.1.0",
"mongodb": "2.2.11",
"nconf": "0.8.4",
"newrelic": "^2.6.0",
"node-sass": "^4.5.3",
"normalizr": "^3.2.1",
"numeral": "^2.0.6",
"oauth": "git+https://github.com/Dakuan/node-oauth.git#24bc9bec128b5ca718eb5cd6e319cd22129a5158",
"oauth2-server": "^2.4.1",
"ordinal-numbers": "^1.0.3",
"pdfmake": "^0.1.32",
"pg": "6.1.6",
"pg-hstore": "2.3.2",
"pluralize": "^7.0.0",
"postcss": "6.0.10",
"postcss-loader": "1.1.1",
"prettyjson": "^1.2.1",
"proxyquire": "^1.7.11",
"pug": "2.0.0-beta6",
"quill": "^1.3.1",
"react": "^15.4.1",
"react-addons-perf": "^15.4.2",
"react-autosize-textarea": "^0.4.4",
"react-datepicker": "^0.40.0",
"react-dom": "^15.6.1",
"react-joyride": "^1.10.1",
"react-redux": "4.4.5",
"react-router": "2.8.1",
"react-router-redux": "4.0.7",
"react-scroll": "^1.5.5",
"react-scrollbar": "^0.5.1",
"react-slick": "^0.15.0",
"react-slider": "^0.7.0",
"react-sparklines": "^1.6.0",
"react-stripe-elements": "^1.0.1",
"react-table": "^6.6.0",
"react-textarea-autosize": "^5.0.6",
"react-toggle": "^4.0.2",
"react-tooltip": "^3.2.10",
"recharts": "^1.0.0-beta.1",
"recompose": "^0.24.0",
"redfour": "^1.0.2",
"redis": "2.6.3",
"redux": "3.6.0",
"redux-devtools-extension": "^1.0.0",
"redux-form": "^7.1.1",
"redux-logger": "2.7.0",
"redux-saga": "^0.16.0",
"redux-saga-test-plan": "^3.3.1",
"redux-thunk": "2.1.0",
"request": "^2.78.0",
"request-promise": "^4.2.2",
"rewire": "^2.5.2",
"s3": "^4.4.0",
"sass-loader": "^6.0.6",
"sendgrid": "4.7.1",
"serialize-error": "^2.1.0",
"simulant": "^0.2.2",
"snyk": "^1.41.1",
"soap": "^0.21.0",
"socket.io": "^2.0.2",
"socket.io-client": "^2.0.2",
"socket.io-cookie-parser": "^1.0.0",
"socket.io-redis": "^5.1.0",
"stripe": "^5.1.0",
"style-loader": "^0.19.1",
"url-loader": "0.5.7",
"url-parse": "^1.1.9",
"urlencode": "^1.1.0",
"uuid": "2.0.3",
"validate.js": "^0.11.1",
"velocity-animate": "^1.4.0",
"velocity-react": "^1.2.1",
"victory": "0.13.7",
"webpack": "^3.10.0",
"xml2json": "^0.11.0"
},
"devDependencies": {
"ava": "^0.24.0",
"babel-jest": "16.0.0",
"babel-register": "6.16.3",
"chromedriver": "^2.34.1",
"enzyme": "^2.7.0",
"eslint": "3.8.1",
"eslint-config-prettier": "2.9.0",
"eslint-plugin-flowtype": "^2.30.0",
"eslint-plugin-lodash-fp": "2.1.3",
"eslint-plugin-react": "6.4.1",
"fetch-mock": "5.5.0",
"flow-bin": "^0.57.2",
"husky": "^0.14.3",
"lint-staged": "^6.0.0",
"nightwatch": "^0.9.19",
"nock": "9.0.2",
"node-mocks-http": "^1.5.4",
"nodemon": "1.11.0",
"npm-run-all": "^4.1.1",
"nyc": "8.3.2",
"prettier": "1.9.2",
"ps-node": "^0.1.4",
"react-addons-test-utils": "^15.4.1",
"react-hot-loader": "3.0.0-beta.6",
"redux-mock-store": "^1.2.2",
"selenium-server-standalone-jar": "^3.8.1",
"sinon": "1.17.6",
"supertest": "2.0.1",
"webpack-dev-server": "^2.11.1",
"webpack-hot-middleware": "^2.21.0"
},
"ava": {
"require": [
"babel-register",
"babel-polyfill",
"ignore-styles"
],
"babel": "inherit"
},
"nyc": {
"extension": [
".jsx",
".js"
],
"include": [
"src"
],
"exclude": [
"tests",
"build",
"node_modules"
]
},
"engines": {
"node": "8.9.x",
"npm": "5.5.x",
"yarn": "1.3.2"
},
}
文件夹结构：
-- build
-- src
-- webpack