1
외부 필수가 아닌 다음은이 응용 프로그램에 대해 잘 작동하고 webpack.config.babel.js 기존, 나는 또 다른 entry (widget)를 추가하고 싶습니다,하지만 난 그렇게 할 경우, 그것은로드 할 모든 external 항목이 필요 만든다 내 새 기능 (google, leaflet ...)을 응용 프로그램의이 부분에서 필요로하지 않을 때에도 내 HTML 페이지에 있습니다. 이 좋은, 그래서Webpack2 : 감안할 때 모든 진입 점
widget.js:10488 Uncaught ReferenceError: google is not defined
plugin & resolve & output 기존 섹션은, 내가 추가 할 새 entry js에 적용된다. external 만 나를 괴롭 히고 있습니다.
이 문제를 해결하는 가장 좋은 방법은 무엇입니까? 웹팩에 대한 지식이 거의 없습니다. 감사.
import path from 'path';
import webpack from 'webpack';
import eslintFormatter from 'eslint-friendly-formatter';
export default (env) => {
const isProd = env ? !!env.release : false;
const isVerbose = env ? !!env.verbose : true;
process.env.NODE_ENV = isProd ? 'production' : 'development';
return {
entry: {
showcase: path.resolve(process.cwd(), 'src/AppBundle/Resources/private/js/showcase/index.js'),
// widget: path.resolve(process.cwd(), 'src/AppBundle/Resources/private/js/widget/index.js'),
},
output: {
path: path.resolve(process.cwd(), 'web/dist/components'),
filename: '[name].js',
publicPath: '/',
},
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
Translator: 'node_modules/bazinga-translator/js',
},
},
externals: {
vue: 'Vue',
vuex: 'Vuex',
google: 'google',
leaflet: 'L',
translator: 'Translator',
markerclustererplus: 'MarkerClusterer',
lodash: '_',
routing: 'Routing',
},
module: {
rules: [
{
test: /\.(js|vue)$/,
enforce: 'pre',
include: path.resolve(process.cwd(), 'src/AppBundle/Resources/private/js'),
use: {
loader: 'eslint-loader',
options: {
formatter: eslintFormatter,
},
},
},
{
test: /\.js$/,
include: path.resolve(process.cwd(), 'src/AppBundle/Resources/private/js'),
use: 'babel-loader',
},
{
test: /\.vue$/,
use: 'vue-loader',
},
],
},
plugins: [
// Define environment variables
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
},
}),
// No compile changes on errors
...isProd ? [] : [new webpack.NoEmitOnErrorsPlugin()],
// JavaScript code minimizing
...isProd ? [
// Minimize all JavaScript output of chunks
// https://github.com/mishoo/UglifyJS2#compressor-options
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: isVerbose,
},
}),
] : [],
],
watchOptions: {
aggregateTimeout: 300,
poll: 1000,
},
};
};