webpack react antd遇到的问题

来源：互联网发布：大数据考研学校排名编辑：程序博客网时间：2024/06/02 05:41

初始化项目文件
加入antd
问题
总结
相关链接

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

初始化项目文件

package.json
这个很简单,直接npm init就好. npm?
index.html
我们新建一个index.html.

mkdir -p publiccd publictouch index.html

index.html内容如下:

<!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文件之前,我们需要使用相关的包

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
同样,在开始新建文件之前, 先安装相关的包.

npm i --save webpack 或者 npm i webpack -gnpm install --save-dev webpack-dev-server // webpack的服务器npm install --save-dev babel-core babel-loader  babel-preset-es2015 babel-preset-react babel-preset-stage-0npm install --save-dev css-loader postcss-loader style-loadernpm install --save-dev autoprefixer

-g是全局安装,执行打包命令的时候直接webpack就好了.如果是--save安装,就需要打包的时候使用 node_modules/.bin/webpack.在这里,我们安装了webpack以及bable家族.(利用bable去转换es6,去转换jsx, …).还有css相关的处理.

// webpack.config.jsvar 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去运行他.

// package.json. . ."scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "build": "webpack",    "start": "webpack-dev-server"  },. . .

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

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

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

. . .<body>    <div id="root"></div>    <script src="/assets/bundle.js"></script> </body>. . .

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

加入`antd`

首先安装相关的包

npm install antd --savenpm 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