webpack引用不了模块

Question

这是我的webpack.config.js

module.exports = {
    output: {
        path: '../test',
        publicPath: '/',
        filename: '[name].js'
    },
    resolve: {
        extensions: ['', '.js', '.vue', '.less', '.css'],
        // 指定webpack从哪些目录开始查找模块
        fallback: [path.join(__dirname, '../node_modules')],
        //别名
        alias: {
            'lib': path.resolve(__dirname, '../static/lib'),
            'jquery': path.resolve(__dirname, '../static/lib/jquery/jquery.min.js'),
        }
    },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],
    resolveLoader: {
        fallback: [path.join(__dirname, '../node_modules')]
    },
    module: {
        loaders: [
            {test:/\.css$,loader: 'vue-style-loader!css-loader'},
            {test:/\.less$,loader: 'vue-style-loader!css-loader!less-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'}
        ]
    }
}

这是我的vue文件目录

我在入口文件里main.js里引用一些模块会出问题，如下面2点
求解是什么回事?

//1、这里不能用import './css/style',只能用下面的require
require('./css/style'); 


window.$ = require('jquery');
//2、这里想引用lib文件下的bootstrap.css引用不了
//import 'lib/bootstrap/css/bootstrap.css';

import Vue from 'vue';
import App from './App';

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

Answer 1

问题1
你试试Import的时候加上后缀 比如 less css 可能是因为不知道用哪个Loader去处理

问题2

Lib是不是存在于static目录吗，他尝试import这个找不到当然就报错了。
如果你想不通过打包来引入一些库，可以尝试修改根目录下的模版index.html 里面去引入，或者通过cdn

另外如果报错，最好把报错提示发出来，方便看

Answer 2

你的output里的test路径在哪里？图里也没看到

我的做法是，在与src同级创建一个dist目录： path: path.join(__dirname, './dist')

还要，你的jquery引用的真的是lib下面的么？如果在node_modules也有的话，像你这样写也是可以的，所以得验证一下，比如在alias里把 jquery 改为 jquery1， 看看是否还能require到。

Answer 3

第一个不知道为什么要require,第二个是可以的，我以为没引用到