的package.json:的WebPack添加JS库
{
"name": "**",
"version": "1.0.0",
"description": "**",
"dependencies": {
"lodash": "4.17.4",
"jquery": "3.2.1",
"jplayer": "2.9.2",
"jquery-ui": "1.12.1",
"owl.carousel": "2.2.0",
"wowjs": "1.1.3"
},
"devDependencies": {
"webpack": "2.3.3",
"webpack-dev-server": "2.4.2",
"html-webpack-plugin": "2.28.0",
"extract-text-webpack-plugin": "2.1.0",
"clean-webpack-plugin": "0.1.16",
"babel-core": "6.24.1",
"babel-loader": "6.4.1",
"babel-preset-es2015": "6.24.0",
"babel-plugin-transform-runtime": "6.23.0",
"uglify-js": "2.8.21",
"html-loader": "0.4.5",
"style-loader": "0.16.1",
"css-loader": "0.28.0",
"url-loader": "0.5.8",
"stylefmt": "5.3.2",
"file-loader": "0.11.1",
"purifycss-webpack": "0.6.0"
},
"scripts": {
"build:dist": "webpack --env=prod --config=webpack.config.js",
"build:dev": "webpack-dev-server --env=dev --config=webpack.config.js"
}
}
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');
module.exports = function (env) {
return {
devServer: {
inline: true
},
devtool: 'source-map',
context: __dirname,
entry: {
landing: [
'./node_modules/wowjs',
'./js/landing.js'
]
},
output: {
path: path.resolve(__dirname, './app/'),
filename: 'js/[name].js',
chunkFilename: '[id].js'
},
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'
}),
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 CommonsChunkPlugin('bundle')
]
};
};
landing.js:
$(() => {
const wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 100,
mobile: false
});
wow.init();
});
我用通讯和:的WebPack --env =督促--config = webpack.config.js
运行命令后,我在浏览器
但页面上的错误打开网页/app/index.html: 未捕获ReferenceError:WOW未定义
@DarrenSweeney,该软件包被命名为'wowjs' –