问题描述
我是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 (将#修改为@)