webpack react antd遇到的问题

  1. 初始化项目文件
  2. 加入antd
  3. 问题
  4. 总结
  5. 相关链接

最近这两天把redux切换到了redux-saga之后,就想学习学习webpack. 咋说呢,这个东西被大家说的神乎其神,所以在我的认知里还是蛮神秘的(新手的感觉而已,不喜勿喷).
今天上午把webpack看了下,有个大致的方向,就想配一个简单的,可以本地开发运行的react(github custom_react)应用.

初始化项目文件

  • package.json
    这个很简单,直接npm init就好. npm?

  • index.html
    我们新建一个index.html.

    1
    2
    3
    mkdir -p public
    cd public
    touch index.html

index.html内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
<!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
    开始这个js文件之前,我们需要使用相关的包
    1
    npm i --save react react-dom

然后我们的index.js是这样的.

1
2
3
4
5
6
7
8
import ReactDOM from 'react-dom';
import App from './App';
import React from 'react'
ReactDOM.render(
<App/>,
document.getElementById('root')
);

  • App.js
    然后我们的App.js是这样的.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    import React, { Component } from 'react';
    class App extends Component {
    render() {
    return (
    <h1>Hello Word</h1>
    )
    }
    }
    export default App
  • webpack.config.js
    同样,在开始新建文件之前, 先安装相关的包.

    1
    2
    3
    4
    5
    npm i --save webpack 或者 npm i webpack -g
    npm install --save-dev webpack-dev-server // webpack的服务器
    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是全局安装,执行打包命令的时候直接webpack就好了.如果是--save安装,就需要打包的时候使用 node_modules/.bin/webpack.在这里,我们安装了webpack以及bable家族.(利用bable去转换es6,去转换jsx, …).还有css相关的处理.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// 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, //这里写你自己想要的启动端口
compress: true,
progress: true,
}
}

好的,目前我们的webpack.config.js大致就是这样,现在我们还需要修改package.json去运行他.

1
2
3
4
5
6
7
8
// package.json
. . .
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server"
},
. . .

现在我们可以在终端输入命令尝试.

1
2
npm run build //会去构建配置,会有文件output.
npm start // 启动项目.

请确定我们的index.html引入了文件.

1
2
3
4
5
6
. . .
<body>
<div id="root"></div>
<script src="/assets/bundle.js"></script>
</body>
. . .

不出意外,正常启动,输入localhost:3008之后,就会出现Hello Word!

加入antd

首先安装相关的包

1
2
npm install antd --save
npm install babel-plugin-import --save-dev

然后在我们的webpack.config.js配置使用.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// webpack.config.js
. . .
query: {
"presets": [
"react",
"es2015",
"stage-0"
],
plugins: [
["import", {
libraryName: "antd",
style: "css"
}],
]
}
. . .

然后我们尝试是否引入了antd.

  • 修改App.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    import React, { Component } from 'react';
    import MainLayout from './src/MainLayout'
    class App extends Component {
    render() {
    return (
    <MainLayout />
    )
    }
    }
    export default App
  • src/MainLayout.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    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一下,应该是可以的了.

问题

怎么说呢,其实这些东西都是可以找到的,但是因为版本等原因,难免会碰到一些小问题,那么我今天就凯说这半天我碰到的两个问题.

  • Cannot GET /

这个问题倒是还好,被我猜测到了,是没有运行起来,应该是说没有找到index.html文件,所以把服务器当前工作地址指向index.html坐在的文件夹下. 我们这里是在public文件夹下.

  • 页面空白

页面空白,不显示Hello Word. 打开浏览器console发现是没有找到对应的bundle.js. 去sources里也没有对应的js文件.这个也有人碰到过,看这个issue
所以,我们需要指定一下publicPath, 否则页面是找不到的.

  • es6语法报错

出现Module Build Faild相关的错误.就是es6的语法错误.找了很久都不行,最后在一篇外文里看到了解决办法(最后会放上链接).加上stage-0的支持就好了.

总结

目前碰到的问题就是那么多,而且这个文章只适合一点点也不懂的朋友,还有很多东西需要去处理,比如生产模式,性能优化..,所以,还得一起继续学习.

相关链接