Webpack无法加载bootstrap v4.0.0-beta。

26 浏览
0 Comments

Webpack无法加载bootstrap v4.0.0-beta。

最近我用webpack和bootstrap v4.0.0-alpha.6创建了一个配置，一直都很好用，直到今天我试图改用v4 beta，现在好像无法正常工作了:(

我有这个配置：

webpack.config.js

entry: {
    app: "./src/app.js"
},
output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'js/[name].js',
    hotUpdateChunkFilename: 'hot/hot-update.js',
    hotUpdateMainFilename: 'hot/hot-update.json'
},
module: {
    loaders: [
        { test: /\.js$/, exclude: /node-modules/, loader: 'babel-loader' },
        { test: /\.html$/, loader: 'raw-loader', exclude: /node_modules/ },
        {   test: /\.(css|scss|sass)$/,
            loader: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: ['css-loader', 'postcss-loader', 'sass-loader']
            }),
            exclude: /node_modules/
        }           
    ]
},
plugins: [
    new webpack.ProvidePlugin({ // inject ES5 modules as global vars
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
    }),
    new ExtractTextPlugin('/css/[name].css'),

在我的app.js中，我有require('bootstrap');

现在当我尝试构建时，我会得到一个错误：

ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js

Module build failed: ReferenceError: Unknown plugin "transform-es2015-modules-strip" specified in "E:\\Documente\\Work\\wordpress\\wordpressSite\\wp-content\\themes\\bsTheme\\node_modules\\bootstra

p\\.babelrc" at 0, attempted to resolve relative to "E:\\Documente\\Work\\wordpress\\wordpressSite\\wp-content\\themes\\bsTheme\\node_modules\\bootstrap"

这个问题似乎出现在bootstrap/.babelrc中

{

"presets": [

[

"es2015",

{

"loose": true,

"modules": false

}

]

],

"plugins": [

"transform-es2015-modules-strip"

]

}

我试着进入bootstrap目录并运行：npm install（我不知道为什么我应该这样做，因为我已经有了自己的bable/autoprefixer配置）

我已经在我的package.json中安装了babel-core、babel-loader和babel-preset-es2015，我安装了transform-es2015-modules-strip并重新构建：

ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js

Module not found: Error: Can't resolve 'jquery' in 'E:\Documente\Work\wordpress\wordpressSite\wp-content\themes\bsTheme\node_modules\bootstrap\dist\js'

@ ./node_modules/bootstrap/dist/js/bootstrap.js 1:0-17

@ ./src/app.js

ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js

Module not found: Error: Can't resolve 'popper.js' in 'E:\Documente\Work\wordpress\wordpressSite\wp-content\themes\bsTheme\node_modules\bootstrap\dist\js'

@ ./node_modules/bootstrap/dist/js/bootstrap.js 1:0-20

@ ./src/app.js

所以我试着在我的项目中安装jquery和popper作为开发依赖...摆脱了jquery的错误，但是...：

ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js

Module not found: Error: Can't resolve 'popper.js' in 'E:\Documente\Work\wordpress\wordpressSite\wp-content\themes\bsTheme\node_modules\bootstrap\dist\js'

@ ./node_modules/bootstrap/dist/js/bootstrap.js 1:0-20

@ ./src/app.js

没有任何主意了...这似乎过于复杂...我似乎不知道我做错了什么，我唯一能想到的办法就是获取bootstrap.js文件直接放在我的其他js文件中...篇幅很长但我想尽可能具体。

我该怎么做才能让它再次工作，非常感谢帮助。谢谢

0