学到React,一直使用着原有的搭建脚手架,create-react-app ,但是使用了这么久,心理难免不是滋味,毕竟自己一直对webpack一知半解,所以我花了一天的时间,看了不少博客,但是博客大多不统一,所以自己也搭建了半天还没搭建起来,后来自己看官网一步一步搭建,一步一步领悟,总算搭建起React环境,途中也踩了不少的坑..在这里写下配置,希望路过的,不要在遇到这些坑.
开始入门
打开你的终端创建一个新文件夹.你可以随意命名这个文件夹.进入文件夹后通过 yarn init 命令初始化项目, yarn init 就像 npm init 一样,会给你提示,只要不停按回车或按你的意愿配置就可以了.
mkdir webpack
cd webpack
npm init当 npm init 命令完成后你能看到你的文件夹(此例中为’hello-world-react’)多了一个新的文件 package.json
安装及配置Webpack
npm install --save-dev webpack
现在我们已经安装了webpack了,我们需要一个配置文件来告诉webpack应该要做什么.在项目文件夹中创建一个新文件 webpack.config.js ,然后用你喜欢的编辑器打开它.
在webpack目录下创建一个 webpack.config.js
mkdir webpack.config.js结构目录如下图:
配置webpack.config.js
var path=require('path');
module.exports={
entry:'./src/index.js',
output:{
path:path.resolve('dist'),
filename:'[hash].bundle.js'
} - entry :指定入口文件,制定src里的输出位置
- output: 指定打包后的文件存放位置
其中的[hash]指的是哈希值.
babel设置
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --dev安装了我们需要的babel以来,babel-preset-es2015 和 babel-preset-react ,presets是babel的插件,它会告诉babel需要把哪些部分转化成原生的javascript.
然后我们需要去设置babel,设置babel可以通过添加一个.babelrc
也可以通过package.json 来修改
添加以下内容
/*
./.babelrc
*/
{
"presets":[
"es2015", "react"
]
}
当webpack调用 babel-loader 时它会知道该对文件做什么处理了.
当前的结构目录如下图:
接下来写下代码吧,试试能否运行 .
编辑 index.js/*
./src/index.js
*/
console.log('成功运行!!')编辑 index.html<!--
index.html
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React App Setup</title>
</head>
<body>
<div id="root">
</div>
</body>
</html>给package.json里的script添加"build":"webpack"
如当前图片:
然后执行打包程序npm run build验证是否成功
Html-Webpack-Plugin
要把打包完成的代码添加到我们的html文件,其中一个方法是手动插入一个 script 标签并指定打包后的文件的位置到src属性.一个更加好的做法是通过一个叫 html-webpack-plugin 的插件帮助我们自动完成上面的工作.这个插件提供了一个简单的方式来根据我们的html文件模板生成我们最终需要的html文件.我们只需要关心html文件模板即可,然后通过一些简单配置它就能帮我们完成script的插入.
简单来说就是能够将打包后的js文件添加入html中
首先我们要在文件中执行以下命令
npm install html-webpack-plugin在webpack.config.js中添加设置
配置最终如下:
var path=require('path');
var HtmlWebpackPulgin =require('html-webpack-plugin');
var CleanWebpackPulgin=require('clean-webpack-plugin');
module.exports={
entry:'./src/index.js',
output:{
path:path.resolve('dist'),
filename:'[hash].bundle.js'
},
module:{
rules:[
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
]
},
plugins:[
new CleanWebpackPulgin(['dist']),
new HtmlWebpackPulgin({
title:'first',
template:'index.html',
filename:'index.html'
})
]
};在原先的在webpack.config.js中继续添加设置
"start":"webpack-dev-server"并执行npm run start
然后打开浏览器并访问 http://localhost:8080/ ,打开控制台你应该可以可以看出输出 “Hey guys and ladies!!” .使用localhost:8080是因为 webpack-dev-server 启动了一个开发服务器.注意webpack-dev-server 会在我们执行 npm run start 时运行.
接下来就是安装React依赖
npm install react react-dom --save接下来我们就在文件夹里创建index.js 和App.js
项目结构如下图:
接下来编辑App.js
// src/App.js
import React from 'react';
export default class App extends React.Component {
render() {
return (
<div style={{textAlign: 'center' ,color:'red'}}>
<h1>成功运行React</h1>
</div>);
}
}然后再把页面的组件渲染到页面上
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';
ReactDOM.render(<App />, document.getElementById('root'));执行npm run start
这样就显示运行成功 ..
如果你已经做到这一步,说明你已经成功一半了 ..而另一半,就是css配置,和img图片的转译配置, 这里我就附上官网的配置,只要在原有的wepback.config.js
配置就行
加载css npm install --save-dev style-loader css-loader
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}加载图片
npm install --save-dev file-loader module: {
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
}
};加载自定义字体
module: {
rules: [
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
]
}
};加载数据
可以加载的有用资源还有数据，如 JSON 文件，CSV、TSV 和 XML。
npm install --save-dev csv-loader xml-loader {
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-loader'
]
}这样..这个React就算基本搭建完成了 ..
附上最后的webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWepackPlugin =require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve('./dist'),
filename: '[hash].bundle.js'
},
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.jsx$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test:/\.(png|svg|jpg|gif)$/,
use:[
'file-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
},
{
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-loader'
]
}
],
},
plugins: [
new CleanWepackPlugin(['dist']),
new HtmlWebpackPlugin({
template: 'index.html',
filename: 'index.html',
inject: 'body'
})
]
};如果还有什么疑问,或者执行不成功,也可以留言..
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
