我得到了这个给我的起点应用程序,我必须对此做出回应。
它具有以下结构的基本节点应用程序:
regedit.exe
我也得到了这个package.json:
notepad.exe
babel文件MyProject
src
scripts
index.js
styles
index.scss
index.html
webpack
webpack.common.js
webpack.config.dev.js
webpack.config.prod.js
.babelrc
的配置如下:
{
"name": "frontend-assessment-test","version": "1.0.0","description": "A frontend assessment test for our new pirates,which are willing to come on board.","scripts": {
"build": "cross-env NODE_ENV=production webpack --config webpack/webpack.config.prod.js --colors","start": "webpack-dev-server --open --config webpack/webpack.config.dev.js"
},"repository": {
"type": "git","url": "git+https://github.com/holidaypirates/frontend-assessment-test"
},"author": "HolidayPirates","license": "MIT","bugs": {
"url": "https://github.com/holidaypirates/frontend-assessment-test/issues"
},"devDependencies": {
"@babel/core": "^7.6.4","@babel/plugin-proposal-class-properties": "^7.5.5","@babel/plugin-syntax-dynamic-import": "^7.2.0","@babel/preset-env": "^7.6.3","babel-loader": "^8.0.6","clean-webpack-plugin": "^3.0.0","copy-webpack-plugin": "^5.0.4","cross-env": "^6.0.3","css-loader": "^3.2.0","eslint": "^6.5.1","eslint-loader": "^3.0.2","file-loader": "^4.2.0","html-webpack-plugin": "^4.0.0-beta.8","mini-css-extract-plugin": "^0.8.0","node-sass": "^4.13.0","sass-loader": "^8.0.0","style-loader": "^1.0.0","webpack": "^4.41.2","webpack-cli": "^3.3.9","webpack-dev-server": "^3.9.0","webpack-merge": "^4.2.2"
},"dependencies": {
"@babel/polyfill": "^7.6.0","core-js": "^3.3.3"
}
}
因此,因为我看到在webpack中添加了babel和样式加载器,所以如果我只安装webpack.common.js
和module.exports = {
entry: {
app: Path.resolve(__dirname,'../src/scripts/index.js')
},output: {
path: Path.join(__dirname,'../build'),filename: 'js/[name].js'
},optimization: {
splitChunks: {
chunks: 'all',name: false
}
},plugins: [
new CleanWebpackPlugin(),new CopyWebpackPlugin([
{ from: Path.resolve(__dirname,'../public'),to: 'public' }
]),new HtmlWebpackPlugin({
template: Path.resolve(__dirname,'../src/index.html')
})
],resolve: {
alias: {
'~': Path.resolve(__dirname,'../src')
}
},module: {
rules: [
{
test: /\.mjs$/,include: /node_modules/,type: 'javascript/auto'
},{
test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,use: {
loader: 'file-loader',options: {
name: '[path][name].[ext]'
}
}
},]
}
};
,则可以在index.js中开始使用react文件导入反应并尝试呈现基本组件。
但是我收到一个错误,react
任何想法我都应该在webpack配置或react-dom
以外的其他软件包中进行哪些更改
和Module build failed (from ./node_modules/babel-loader/lib/index.js):
以便在react
中使用react?
谢谢。