标签: webpack

我用create-react-app包创建了一个ReactJS项目并且运行良好,但我找不到webpack文件和配置.

react-create-app如何与webpack一起使用？webpack配置文件位于默认安装位置中的哪个位置create-react-app？我无法在项目的文件夹中找到配置文件.

我还没有创建覆盖配置文件.我可以使用其他文章管理配置设置,但我想找到传统的配置文件.

我是反应的新手,我想在我的反应应用程序中包含bootstrap

我已经安装了bootstrap npm install bootstrap --save

现在,想在我的反应应用程序中加载bootstrap css和js.

我正在使用webpack.

webpack.config.js

var config = {
    entry: './src/index',

    output: {
        path: './',
        filename: 'index.js'
    },

    devServer: {
        inline: true,
        port: 8080,
        historyApiFallback: true,
        contentBase:'./src'
    },

    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel',

                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};

module.exports = config;

我的问题是"如何在node_modules的reactjs app中包含bootstrap css和js？" 如何设置bootstrap以包含在我的反应应用程序中？

如何配置Angular和VSCode以便我的断点工作？

我对任务运行器和捆绑器世界有点新意,并且经历了类似的事情

Grunt,Gulp,Webpack,Browserify

,我觉得他们之间没有太大区别.换句话说,我觉得Webpack可以完成任务运行员所做的一切.但是我仍然有一个巨大的例子,其中gulp和webpack一起使用.我无法弄清楚原因.

对此我不熟悉,我可能会把事情弄错.如果你能指出我所缺少的东西,那就太好了.欢迎任何有用的链接.

提前致谢.

我正在创建一个使用webpack-dev-server开发的应用程序以及react-router.

似乎webpack-dev-server是基于这样的假设,即在一个地方(即"/")有一个公共入口点,而react-router允许无限量的入口点.

我想要webpack-dev-server的好处,特别是热量重新加载功能,这对于提高工作效率很有帮助,但我仍然希望能够加载在react-router中设置的路由.

如何实现它以便它们一起工作？你能以这种方式在webpack-dev-server前运行快速服务器吗？

我正在学习React.js,我正在使用Windows 8 OS.i已导航到我的根文件夹

1.Created the package.json file by npm init
2. install webpack by npm install -S webpack.now webpack has been downloaded to my modules folder
3. install webpack globally by typing npm install webpack -g
4. i am also having a webpack.config.js in my root folder which contains the source and ouput directory
5. when i type the webpack command i am getting the below error.

webpack不被识别为内部或外部命令,可操作程序或批处理文件

我的反应项目中的图像存在问题.事实上,我一直认为src属性的相对路径是建立在文件架构上的

这是我的文件架构:

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
... 

但是我意识到路径是建立在URL上的.在我的一个组件中(例如到file1.jsx)我有这个:

localhost/details/2
<img src="../img/myImage.png" /> -> works

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't work, images are not displayed

怎么可能解决这个问题？我希望在react-router处理的任何形式的路由中,所有图像都可以用相同的路径显示.

假设我有这样的类(用typescript编写)并将其与webpack捆绑在一起bundle.js.

export class EntryPoint {
    static run() {
        ...
    }
}

在我的index.html中,我将包含bundle,但是我还想调用那个静态方法.

<script src="build/bundle.js"></script>
<script>
    window.onload = function() {
        EntryPoint.run();
    }
</script>

但是,EntryPoint在这种情况下,未定义.我如何从另一个脚本调用捆绑的JavaScript？

补充:Webpack配置文件.

Webpack 4附带以下声明:

webpack.optimize.UglifyJsPlugin已被删除,请改用config.optimization.minimize.

很公平,但我找不到任何有关配置在底层运行的UglifyJsPlugin实例的信息,例如更改缓存目录.可以这样做吗？

我不想将jQuery对象暴露给可在浏览器中的开发人员控制台中访问的全局窗口对象.现在在我的webpack配置中,我有以下几行:

plugins: [
                new webpack.ProvidePlugin({
                    $: 'jquery',
                    jQuery: 'jquery'
                })
            ]

这些行将jQuery定义添加到我的webpack模块中的每个文件中.但是,当我构建项目并尝试在开发人员控制台中访问jQuery时,如下所示:

window.$;
window.jQuery;

它说这些属性是未定义的......

有没有办法来解决这个问题？