脚本宝典收集整理的这篇文章主要介绍了从0开始配置webpack和搭建一个React项目,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
先来说说react搭建:
1 官方文档上也有提供直接下载react包,但是修改webpack配置比较麻烦
npx create-react-app my-app
cd my-app
npm start@H_406_26@
修改webpack配置需要执行
npm run eject
2 自行搭建一个项目并且配置webpack--主要记录学习阶段~总结的可能不太好,勉强看看,重点记录一下第二种的方式
通过yarn管理包
- 下载yarn
yarn官网链接安装步骤都有的
- 在项目目录下,执行yarn inIT
- 安装webpack
yarn add webpack --dev
-
新建webpack.config.js文件,
贴官网示例:
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
}
};
命令行执行webpack会发现dist目录
注意:yarn安装过程中如果出错,尝试将yarn切换到淘宝镜像再进行下载哦~,我安装过程中出现过问题,切到这就没问题了
yarn config set registry 'https://registry.npm.taobao.org'
-
yarn add html-webpack-plugin --dev
文档使用链接地址
按照文档操作,修改webpack.config.js使用html-webpack-plugin打包html文件
再次执行webpack命令,会发现dist文件夹下面多了一个index.html
设置html-webpack-plugin的template模版,在src新建index.html,并且设置html内容
const path = require('path');
VAR HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
},
plugins: [new HtmlWebpackPlugin(
{
template:'./src/index.html'
}
)]
};
现在dist文档下面的index.html就是当前src下的index.html的模版了
具体详情见文档地址 在src/app.js中写入一些ES6语法,再次执行webpack命令,dist/app.js进行了转换
-
安装react转换 babel-preset-react
yarn add babel-PReset-react --dev
修改webpack.config.js
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.jsx'
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
},
plugins: [new HtmlWebpackPlugin(
{
template:'./src/index.html'
}
)],
module: {
rules: [
{
test: /.m?jsx$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env','react']
}
}
}
]
}
};
-
安装react
yarn add react react-dom
react添加操作地址详情
将src/app.js修改为app.jsx
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('app')
);
再执行webpack进行打包
如果出现Error: Plugin/Preset files are not allowed to export objects, only functions.错误
说明babel的版本不一致,我这边是因为"babel-preset-react": "^6.24.1"默认装的6版本,其他babel安装的是7版本,所以统一升级到7或者降级到6
@H_777_322@yarn add babel-preset-react@7.0.0 --dev
这样在进行打包,就可以了,这个时候打开dist/index.html我们看到hello, world!说成功编译了react
-
安装style-loader
yarn add css-loader style-loader --dev
安装地址操作详情
在webpack.config.js的rules中添加
{
test: /.css$/,
use: ['style-loader', 'css-loader'],
},
在src下新建一个文件index.css,随便修改一点样式
h1{
color:#F00;
}
在app.jsx中引入
import './index.css'
再次执行webpack打包,刷新dist/index.html
-
安装ExtractTextWebpackPlugin插件将css独立到单独的文件
yarn add extract-text-webpack-plugin --dev
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './src/app.jsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
},
module: {
rules: [
{
test: /.m?jsx$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env','react']
}
}
},
{
test: /.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
]
},
plugins: [
new HtmlWebpackPlugin(
{
template:'./src/index.html'
}
),
new ExtractTextPlugin("index.css"),
],
};
webpack.config.js配置如上
再次执行webpack,dist目录下就多了一个index.css了~
注意:打包遇到Tapable.plugin is deprecated. Use new API on .hooks
instead错误,原因是extract-text-webpack-plugin目前版本不支持webpack4
执行:yarn add extract-text-webpack-plugin@next --dev
-
安装sass-loader
yarn add sass-loader --dev
在webpack.config.js中rules添加
{
test: /.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}
新建一个index.scss文件
body{
background: #ccc;
#app{
font-Size: 22px;
}
}
在执行webpack会出现报错Cannot find module 'node-sass'
查看文档链接
需要安装node-sass
yarn add node-sass --dev
打包,查看index.html可以看到样式应用上去了~
-
安装url-loader处理图片链接
yarn add url-loader file-loader --dev
官网地址
在rules中加入:
{
test: /.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
项目中引入图片,进行打包,这样图片资源也打包解析进去了~
-
添加解析字体rule
{
test: /.(eot|svg|ttf|woff|woff2|otf)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name:'resource/[name].[ext]'
}
}
]
},
-
添加webpack-dev-server
yarn add webpack-dev-server --dev
修改package.json添加
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"watch": "webpack --watch",
"start": "webpack-dev-server --open",
"build": "webpack-cli"
}
执行yarn run start启动项目
yarn run build打包项目
最后附上当前为止修改后的webpack.config.js
const path = require('path');
const webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './src/app.jsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: './js/[name].[hash].js',
chunkFilename: './js/[name].[hash].js',
},
devServer: {
port: 8080,
Proxy: {
'/expo': {
target: 'https://xxx',
changeOrigin: true,
pathrewrite: {
'/expo': '/expo',
},
secure: false,
},
},
hot:true
},
module: {
rules: [
{
test: /.m?jsx$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env','react']
}
}
},
{
test: /.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /.(png|jpg|gif|ico|jpeg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: "[name].[ext]",
publicPath: "../images/",
outputPath: "images/"
}
}
]
},
{
test: /.(eot|svg|ttf|woff|woff2|otf)$/i,
use: [{
loader: "file-loader",
options: {
name: "[name].[ext]",
publicPath: "../fonts/",
outputPath: "fonts/"
}
}]
},
]
},
plugins: [
new HtmlWebpackPlugin(
{
template:'./src/index.html'
}
),
new ExtractTextPlugin("css/[name].css"),
],
optimization:{
splitChunks:{
name:'common',
filename:'js/base.js'
}
}
};
以上是脚本宝典为你收集整理的从0开始配置webpack和搭建一个React项目全部内容,希望文章能够帮你解决从0开始配置webpack和搭建一个React项目所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。