webpack.config.js:
const path = require('path');
const glob = require('glob');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
const CleanWebpackPlugin = require('clean-webpack-plugin');
const PurifyCSSPlugin = require('purifycss-webpack');
module.exports = function (env) {
return {
devServer: {
inline: true
},
resolve: {
extensions: ['.html', '.css', '.js', '.json'],
modules: ['node_modules'],
},
devtool: 'source-map',
context: __dirname,
entry: {
landing: [
'./js/landing.js'
]
},
output: {
path: path.resolve(__dirname, './app/'),
filename: '[name].js',
chunkFilename: '[id].js',
pathinfo: true,
sourceMapFilename: '[file].map'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015'],
plugins: ['transform-runtime']
}
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader']
})
},
{
test: /\.html$/,
use: 'html-loader'
},
{
test: /\.(eot|woff|ttf|svg|png|jpg)$/,
use: 'url-loader?limit=50000&name=assets/[name]-[hash].[ext]'
}
]
},
plugins: [
new CleanWebpackPlugin(['app']),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
_: 'lodash',
jPlayer: 'jplayer'
}),
new ExtractTextPlugin({
filename: (getPath) => {
return getPath('css/[name].css');
},
allChunks: true
}),
new HtmlWebpackPlugin({
filename: 'index.html',
chunks: ['landing', 'bundle'],
favicon: './img/favicon.png',
template: './pages/index.html',
inject: true
}),
new HtmlWebpackPlugin({
filename: 'terms.html',
chunks: ['terms', 'bundle'],
favicon: './img/favicon.png',
template: './pages/terms.html',
inject: true
}),
new CommonsChunkPlugin('bundle')
]
};
};
landing.js:
import $ from '../node_modules/jquery';
window.$ = $;
window.jQuery = $;
jQuery = $;
import '../node_modules/owl.carousel';
我使用了命令:webpack --env = prod --config = webpack.config.js
运行命令后,我在浏览器中打开页面/app/index.html 但页面上的错误:
Uncaught TypeError: Cannot read property 'fn' of undefined
at owl.carousel.js:1658
1658:$ .fn.owlCarousel = function(option){