在项目的入口文件中引入了一个本地static
文件下的jquery.js
在开发环境下一切正常,jquery
库是可以用的
//main.js
window.$ = require('lib/jquery/jquery.js');
但是用webpack打包后,运行index.html
报错说模块找不到
但我明明打包后把static
下的lib文件里的js都拷贝到打包后的文件下了
这是我打包后的文件结构,求解
output
|____live.html//主页面
|____src
|____js
|___live.js//入口文件
|____lib
|____jquery
|____jquery.js
这是开发环境下的目录结构
webpack
|____build
|____webpack.config.js
|____src//项目路由
|___main.js//主入口文件就是上面引用jquery的地放
|____static //这里是我放置js的地方
|___lib
|___jquery
|____jquery.js
live.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>live</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="src/js/live.js"></script>
</body>
</html>
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var utils = require('./utils');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpackConfig = {
entry: {
live: './src/app/live/main.js'
},
output: {
path: path.resolve(__dirname, '../../output'),
publicPath: '',
filename: utils.assetsPath('js/[name].js'),
chunkFilename: utils.assetsPath('js/[id].js')
},
module: {
loaders: [
{test:/\.html$/,loader: "html?attrs=img:src img:data-src"},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url',
query: {
limit: 1,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}, {
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url',
query: {
limit: 1,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
{test:/\.js$/, exclude: /(node_modules|lib)/, loader: 'babel-loader'}
]
},
vue: {
loaders: {}
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
//排除文件(static/lib)不打包
new webpack.IgnorePlugin(new RegExp("(jquery.min|react)")),
new webpack.optimize.OccurenceOrderPlugin(),
new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
new HtmlWebpackPlugin({
filename: 'live.html',
template: 'template.html',
inject: true
})
],
resolve: {
// 省略后缀
extensions: ['', '.js'],
//别名
alias: {
'lib': path.resolve(__dirname, '../static/lib')
}
},
}
module.exports = webpackConfig;