webpack打包后找不到模块

Question

我的开发互环境配置

module.exports = {
    output: {
        path: '../output/project',
        publicPath: '/',
        filename: '[name].js'
    },
    resolve: {
        extensions: ['', '.js', '.vue', '.less', '.css'],
        //别名
        alias: {
            'lib': path.resolve(__dirname, '../static/lib')
        }
    },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
    ],
    resolveLoader: {
        fallback: [path.join(__dirname, '../node_modules')]
    },
    module: {
        loaders: [
            {test:/\.css$,loader: 'vue-style-loader!css-loader'},
            {test:/\.vue$/, loader: 'vue-loader'},
            {test: /\.json$/, loader: 'json'},
            {test:/\.html$/,loader: "html?attrs=img:src img:data-src"},
            {test: /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/,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'}
        ]
    }
}

这是我的生产环境配置

module.exports = {
    output: {
        path: '../output/project',
        publicPath: '/',
        filename: '[name].js'
    },
    resolve: {
        extensions: ['', '.js', '.vue', '.less', '.css'],
        //别名
        alias: {
            'lib': path.resolve(__dirname, '../static/lib')
        }
    },
    plugins: [
         new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new ParallelUglifyPlugin({
            cacheDir: '.cache/',
            uglifyJS:{
                output: {
                    comments: false
                },
                compress: {
                    warnings: false
                }
            }
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        }),
        //排除文件(static/lib)不打包
        new webpack.IgnorePlugin(new RegExp("(jquery.min|react)")),
        new webpack.optimize.OccurenceOrderPlugin(),
        new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
    ],
    resolveLoader: {
        fallback: [path.join(__dirname, '../node_modules')]
    },
    module: {
        loaders: [
            {test:/\.css$,loader: 'vue-style-loader!css-loader'},
            {test:/\.vue$/, loader: 'vue-loader'},
            {test: /\.json$/, loader: 'json'},
            {test:/\.html$/,loader: "html?attrs=img:src img:data-src"},
            {test: /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/,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'}
        ]
    }
}

这是我的目录结构

    project
       |____src
           |___test
               |____App.vue
               |____main.js
       |____static
           |___lib
               |____bootstrap
               |____jquery         

然后我在开发环境下引用jquery和bootstrap模块是可以的
但是在打包后找不到这两个模块
报showlive.c0791a2004182825aff5.js:1 Uncaught Error: Cannot find module "lib/jquery/jquery.min.js"
请问这是怎么回事?

import 'lib/jquery/jquery.min.js';
import 'lib/bootstrap/js/bootstrap.min.js';

import Vue from 'vue';
// app
import App from './App';
import router from './router/index';

new Vue({
    el: '#app',
    router,
    render:h =>h (App)
});

Answer 1

npm install jquery 用npm来管理