最近這兩天把redux切換到了redux-saga之后,就想學(xué)習(xí)學(xué)習(xí)webpack. 咋說呢,這個(gè)東西被大家說的神乎其神,所以在我的認(rèn)知里還是蠻神秘的(新手的感覺而已,不喜勿噴).
今天上午把webpack看了下,有個(gè)大致的方向,就想配一個(gè)簡(jiǎn)單的,可以本地開發(fā)運(yùn)行的react(github custom_react)應(yīng)用.
初始化項(xiàng)目文件
package.json
這個(gè)很簡(jiǎn)單,直接npm init就好. npm?index.html
我們新建一個(gè)index.html.
mkdir -p public
cd public
touch index.html
index.html內(nèi)容如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>custom</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
-
index.js
開始這個(gè)js文件之前,我們需要使用相關(guān)的包
npm i --save react react-dom
然后我們的index.js是這樣的.
import ReactDOM from 'react-dom';
import App from './App';
import React from 'react'
ReactDOM.render(
<App/>,
document.getElementById('root')
);
-
App.js
然后我們的App.js是這樣的.
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<h1>Hello Word</h1>
)
}
}
export default App
-
webpack.config.js
同樣,在開始新建文件之前, 先安裝相關(guān)的包.
npm i --save webpack 或者 npm i webpack -g
npm install --save-dev webpack-dev-server // webpack的服務(wù)器
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0
npm install --save-dev css-loader postcss-loader style-loader
npm install --save-dev autoprefixer
-g是全局安裝,執(zhí)行打包命令的時(shí)候直接webpack就好了.如果是--save安裝,就需要打包的時(shí)候使用node_modules/.bin/webpack.在這里,我們安裝了webpack以及bable家族.(利用bable去轉(zhuǎn)換es6,去轉(zhuǎn)換jsx, ...).還有css相關(guān)的處理.
// webpack.config.js
var webpack = require('webpack');
var path = require('path')
module.exports = {
entry: ['webpack/hot/dev-server', __dirname + "/index.js"],
output: {
path: __dirname + "/build",
filename: "bundle.js",
publicPath: "/assets/"
},
module: {
loaders: [
{
test: /\.(js|jsx)$/, // test 匹配js和jsx）
exclude: /node_modules/, //屏蔽不需要處理的文件
loader: 'babel-loader',
query: {
"presets": [
"react",
"es2015",
"stage-0"
],
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader?importLoaders=1',
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(), //模塊的熱替換插件
],
devServer: {
contentBase: path.join(__dirname, "/public"), // index.html的位置
historyApiFallback: true,
inline: true,
port: 3008, //這里寫你自己想要的啟動(dòng)端口
compress: true,
progress: true,
}
}
好的,目前我們的webpack.config.js大致就是這樣,現(xiàn)在我們還需要修改package.json去運(yùn)行他.
// package.json
. . .
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server"
},
. . .
現(xiàn)在我們可以在終端輸入命令嘗試.
npm run build //會(huì)去構(gòu)建配置,會(huì)有文件output.
npm start // 啟動(dòng)項(xiàng)目.
請(qǐng)確定我們的index.html引入了文件.
. . .
<body>
<div id="root"></div>
<script src="/assets/bundle.js"></script>
</body>
. . .
不出意外,正常啟動(dòng),輸入localhost:3008之后,就會(huì)出現(xiàn)Hello Word!
加入antd
首先安裝相關(guān)的包
npm install antd --save
npm install babel-plugin-import --save-dev
然后在我們的webpack.config.js配置使用.
// webpack.config.js
. . .
query: {
"presets": [
"react",
"es2015",
"stage-0"
],
plugins: [
["import", {
libraryName: "antd",
style: "css"
}],
]
}
. . .
然后我們嘗試是否引入了antd.
- 修改
App.js
import React, { Component } from 'react';
import MainLayout from './src/MainLayout'
class App extends Component {
render() {
return (
<MainLayout />
)
}
}
export default App
- src/MainLayout.js
import React from 'react'
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
const {Header, Content, Footer, Sider} = Layout;
const SubMenu = Menu.SubMenu;
class SiderDemo extends React.Component {
state = {
collapsed: false,
}
onCollapse = (collapsed) => {
console.log(collapsed);
this.setState({
collapsed
});
}
render() {
return (
<Layout style={{
minHeight: '100vh'
}}>
<Sider
collapsible
collapsed={this.state.collapsed}
onCollapse={this.onCollapse}
>
<div className="logo" />
<Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
<Menu.Item key="1">
<Icon type="pie-chart" />
<span>Option 1</span>
</Menu.Item>
<Menu.Item key="2">
<Icon type="desktop" />
<span>Option 2</span>
</Menu.Item>
<SubMenu
key="sub1"
title={<span><Icon type="user" /><span>User</span></span>}
>
<Menu.Item key="3">Tom</Menu.Item>
<Menu.Item key="4">Bill</Menu.Item>
<Menu.Item key="5">Alex</Menu.Item>
</SubMenu>
<SubMenu
key="sub2"
title={<span><Icon type="team" /><span>Team</span></span>}
>
<Menu.Item key="6">Team 1</Menu.Item>
<Menu.Item key="8">Team 2</Menu.Item>
</SubMenu>
<Menu.Item key="9">
<Icon type="file" />
<span>File</span>
</Menu.Item>
</Menu>
</Sider>
<Layout>
<Header style={{
background: '#fff',
padding: 0
}} />
<Content style={{
margin: '0 16px'
}}>
<Breadcrumb style={{
margin: '16px 0'
}}>
<Breadcrumb.Item>User</Breadcrumb.Item>
<Breadcrumb.Item>Bill</Breadcrumb.Item>
</Breadcrumb>
<div style={{
padding: 24,
background: '#fff',
minHeight: 360
}}>
Bill is a cat.
</div>
</Content>
<Footer style={{
textAlign: 'center'
}}>
Ant Design ?2016 Created by Ant UED
</Footer>
</Layout>
</Layout>
);
}
}
export default SiderDemo
然后我們npm start一下,應(yīng)該是可以的了.
問題
怎么說呢,其實(shí)這些東西都是可以找到的,但是因?yàn)榘姹镜仍?難免會(huì)碰到一些小問題,那么我今天就凱說這半天我碰到的兩個(gè)問題.
Cannot GET /
這個(gè)問題倒是還好,被我猜測(cè)到了,是沒有運(yùn)行起來,應(yīng)該是說沒有找到index.html文件,所以把服務(wù)器當(dāng)前工作地址指向index.html坐在的文件夾下. 我們這里是在public文件夾下.
- 頁(yè)面空白
頁(yè)面空白,不顯示Hello Word. 打開瀏覽器console發(fā)現(xiàn)是沒有找到對(duì)應(yīng)的bundle.js. 去sources里也沒有對(duì)應(yīng)的js文件.這個(gè)也有人碰到過,看這個(gè)issue
所以,我們需要指定一下publicPath, 否則頁(yè)面是找不到的.
-
es6語(yǔ)法報(bào)錯(cuò)
出現(xiàn)Module Build Faild相關(guān)的錯(cuò)誤.就是es6的語(yǔ)法錯(cuò)誤.找了很久都不行,最后在一篇外文里看到了解決辦法(最后會(huì)放上鏈接).加上stage-0的支持就好了.
總結(jié)
目前碰到的問題就是那么多,而且這個(gè)文章只適合一點(diǎn)點(diǎn)也不懂的朋友,還有很多東西需要去處理,比如生產(chǎn)模式,性能優(yōu)化..,所以,還得一起繼續(xù)學(xué)習(xí).
