學到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'
})
]
};如果還有什麼疑問,或者執行不成功,也可以留言..
