webpack.config.js
const webpack = require('webpack')
const path = require('path')
const extractCommons = new webpack.optimize.CommonsChunkPlugin({
name: 'commons',
filename: './js/commons.js'
})
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const extractCSS = new ExtractTextPlugin('[name].bundle.css')
const publicJS = [
'./js/bootstrap.js',
'./js/fancybox/source/jquery.fancybox.pack.js',
'./js/flexslider/jquery.flexslider-min.js',
'./js/bxslider/jquery.bxslider.min.js',
'./js/jquery.validate/jquery.validate.min.js',
'./js/jquery.validate/additional-methods.min.js',
'./js/jquery.maskedinput.min.js',
'./js/jquery.formatDateTime.js',
'./js/gpw-public.js'
];
const config = {
devtool: 'eval-source-map',
context: path.resolve(__dirname, ''),
devServer: {
proxy: {
'**': {
target: 'http://www.gdwv2.com',
secure: false,
changeOrigin: true
}
}
},
entry: {
'./js/theme-selector/gpw-theme-selector.min': './js/theme-selector/gpw-theme-selector.js',
'./pub/public.bundle': publicJS,
},
output: {
path: path.resolve(__dirname, ''),
filename: '[name].js'
},
module: {
rules: [{
test: /\.(png|jpg)$/,
include: path.resolve(__dirname, 'style'),
use: [{
loader: 'url-loader',
options: { limit: 10000 } // Convert images < 10k to base64 strings
}]
},
{
//
test: /\.scss$/,
include: path.resolve(__dirname, 'style'),
loader: extractCSS.extract(['css-loader','sass-loader'])
},
{
// Theme selector
test: /\.js$/,
include: path.resolve(__dirname, 'js/theme-selector'),
use: [{
loader: 'babel-loader',
options: { presets: ['es2015', 'react'] }
}]
},
{
test: /\.js$/,
include: path.resolve(__dirname, 'js'),
use: [{
loader: 'babel-loader',
options: { presets: ['es2015', 'react'] }
}]
}
]
},
plugins: [
new webpack.NamedModulesPlugin(),
extractCommons,
extractCSS
]
}
module.exports = config
publicJS
数组是一堆供应商文件。这种类有效。虽然文件不按它们在数组中的顺序连接,但会生成一些未定义的错误。还要在public.bundle.js
文件中从未在之前加载的脚本中定义的scritps中定义的变量中获取未定义的变量错误。要明确:
在myscript.js中定义 - &gt; var foo = "bar";
在public.bundle.js
之后加载myscript.js
并尝试使用foo
但调用未定义的变量错误。也许我不理解webpackJsonp(...
函数webpack脚本被包含在内。
第二个条目是React应用程序。这是按预期工作的。