webpack打包后运行出错

在项目的入口文件中引入了一个本地static文件下的jquery.js
在开发环境下一切正常,jquery库是可以用的

//main.js

window.$ = require('lib/jquery/jquery.js');

但是用webpack打包后,运行index.html报错说模块找不到

clipboard.png
但我明明打包后把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;
阅读 3.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题