没有.babelrc文件的情况下,此应用程序如何工作

问题描述

我是babel和webpack的新手,正在经历这个babel和webpack的安装程序,它可以正常工作,但不需要.babelrc文件进行预设。我想知道它是如何在内部工作的,为什么它不需要.babelrc文件中的预设。

我们可以对babel插件做同样的事情吗,我们可以只在webpack中设置它们,而不像在这些设置下使用预设一样使用.babelrc吗?

下面的Webpack配置:

const path = require('path');
const fs = require('fs');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// App directory
const appDirectory = fs.realpathSync(process.cwd());

// Gets absolute path of file within app directory
const resolveAppPath = relativePath => path.resolve(appDirectory,relativePath);

// Host
const host = process.env.HOST || 'localhost';

// required for babel-preset-react-app
process.env.NODE_ENV = 'development';

module.exports = {

    // Environment mode
    mode: 'development',// Entry point of app
    entry: resolveAppPath('src'),output: {
  
      // Development filename output
      filename: 'static/js/bundle.js',},devServer: {

        // Serve index.html as the base
        contentBase: resolveAppPath('public'),// Enable compression
        compress: true,// Enable hot reloading
        hot: true,host,port: 3000,// Public path is root of content base
        publicPath: '/',plugins: [
        // Re-generate index.html with injected script tag.
        // The injected script tag contains a src value of the
        // filename output defined above.
        new HtmlWebpackPlugin({
          inject: true,template: resolveAppPath('public/index.html'),}),],module:{
          rules:[
              {
                  test:/\.(js|jsx)$/,exclude:/node_modules/,include:resolveAppPath('src'),loader:'babel-loader',options:{
                      presets:[
                          require.resolve('babel-preset-react-app'),]
                  }
              },{
                test:/\.s?css$/,use:[
                    'style-loader','css-loader','sass-loader'
                ]
            }
          ]
      }
  }

package.json文件

{
  "name": "Boiler_RWSRe","version": "1.0.0","description": "Boilerplate with React,Webpack,SCSS and CSS Reset all setup","main": "index.js","scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js"
  },"keywords": [],"author": "","license": "ISC","dependencies": {
    "node-sass": "^4.5.3","normalize.css": "^8.0.1","react": "^16.8.6","react-dom": "^16.8.6","sass-loader": "^6.0.6"
  },"devDependencies": {
    "@babel/core": "^7.4.5","babel-loader": "^8.0.6","babel-preset-react-app": "^9.0.0","css-loader": "^5.0.0","html-webpack-plugin": "^3.2.0","style-loader": "^2.0.0","webpack": "^4.29.6","webpack-cli": "^3.3.0","webpack-dev-server": "^3.3.0"
  }
}

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)