标签：.json 管理 新建 很多 blob 入口 script put issue
webpack搭建react项目 github源码
具体配置信息参照package.json和webpack.config.js
首先创建一个项目文件夹,并进入到该文件夹：
mkdir react-webpack-project
package.json 中scripts中配置
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
} 配置babel编译es6的代码，在根目录下新建.babelrc文件，并写入以下代码：
{
"presets": [
"env"
]
} // webpack v4
const path = require(‘path‘);
module.exports = {
entry: { main: ‘./src/index.js‘ },
output: {
path: path.resolve(__dirname, ‘dist‘),
filename: ‘main.js‘
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};通过npm run dev发现babel版本过低报错，因此将babel版本升级，安装完成后npm run dev能进行正常打包
npm i babel-loader@7.1.5 -D在dist文件夹下新建index.html文件，并写入以下内容，其中引用了css文件
在src文件下新建style.css,写入任意css表达式，并将其引用至index.js中,再次通过npm run dev出现报错，提示“You may need an appropriate loader to handle this file type”，需要安装配置css-loader
div{background-color:red};
import "./style.css";通过npm下载css-loader和style-loader:
npm install css-loader style-loader -D
另外还需安装extract-text-webpack-plugin插件(通过@next安装新版本，低版本在webpack4上无法正常运行):
npm install --save-dev extract-text-webpack-plugin@next安装完成后对webpack.config.js进行配置,在rules中添加css-loader配置，引入extract-text-webpack-plugin并配置plugins，配置完成后通过npm run dev可正常进行编译
const ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);
{
test: /\.css$/,
use: ExtractTextPlugin.extract(
{
fallback: ‘style-loader‘,
use: [‘css-loader‘]
})
}
plugins:[
new ExtractTextPlugin("styles.css")
]在src下新建index.html文件：
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>Hello, world!</div>
<script src="main.js"></script>
</body>
</html>安装html-webpack-plugin插件，并进行相应的配置：
npm install extract-text-webpack-plugin -D
webpack.config.js中的配置信息如下：
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
plugins:[
new ExtractTextPlugin("styles.css"),
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: ‘./src/index.html‘,
filename: ‘index.html‘
})
]通过配置webpack-dev-server开启web服务器,通过npm安装webpack-dev-server:
npm install webpack-dev-server -D
安装完成后，在webpack.config.js中配置devServer:
devServer:{
contentBase:path.resolve(__dirname,‘dist‘),
publicPath:‘/‘,
port:8080,
historyApiFallback:true
}最后，在package.json的scripts脚本中写入:
"start": "webpack-dev-server --config webpack.config.js"
现在，就可以通过npm run start命令启动项目啦～～～
使用webpack搭建react项目 webpack-react-project
标签：.json 管理 新建 很多 blob 入口 script put issue
原文地址：https://www.cnblogs.com/Nancy-wang/p/9926509.html
