[React] webpack+babel+react+sass

作者: 何幻 | 来源:发表于2017-04-26 11:24 被阅读1347次

    1. 工程配置

    (1)新建工程目录,并进入

    $ mkdir webpack-babel-react-sass && cd webpack-babel-react-sass
    

    (2)项目初始化

    $ npm init
    

    会提示输入一些工程相关的信息,
    全部使用默认值即可,最后会写入到./package.json

    (3)安装开发环境依赖

    $ npm install --save-dev \
    webpack \
    babel-core babel-loader babel-preset-es2015 babel-preset-react \
    css-loader style-loader sass-loader node-sass \
    extract-text-webpack-plugin
    

    会自动修改./package.json

    其中,babel相关的有,babel-core babel-loader babel-preset-es2015 babel-preset-react,sass相关的有,css-loader style-loader sass-loader node-sass

    extract-text-webpack-plugin是一个webpack插件,用于将样式表提取到单独的文件中。

    (4)安装代码依赖

    $ npm install --save react react-dom
    

    会自动修改./package.json

    (5)配置babel

    新建.babelrc文件

    {
        "presets": [
            "es2015",
            "react"
        ]
    }
    

    (6)配置webpack

    新建webpack.config.js

    const path = require('path');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    
    module.exports = {
        context: path.resolve(__dirname, ''),
        entry: [
            path.resolve(__dirname, 'src/index.jsx')
        ],
        output: {
            path: path.resolve(__dirname, 'dist/'),
            filename: 'index.js'
        },
        module: {
            loaders: [
                {
                    test: /\.jsx$/,
                    loader: 'babel-loader'
                },
                {
                    test: /\.scss$/,
                    loaders: ExtractTextPlugin.extract({
                        fallback: 'style-loader',
                        use: ['css-loader', 'sass-loader']
                    })
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin('index.css')
        ]
    };
    

    当前目录结构

    + node_modules
    .babelrc
    package.json
    webpack.config.js
    

    2. 示例代码

    新建component和src目录

    添加以下5个文件,
    component/hello.jsxcomponent/hello.scss
    src/index.jsxsrc/index.scsssrc/index.html
    目录结构如下,

    - component
        hello.jsx
        hello.scss
    + node_modules
    - src
        index.jsx
        index.scss
    .babelrc
    package.json
    webpack.config.js
    

    (1)component/hello.jsx

    import React, { Component } from 'react';
    import './hello.scss';
    
    class Hello extends Component {
        render() {
            return (
                <span className="hello">hello</span>
            );
        }
    }
    
    export default Hello;
    

    (2)component/hello.scss

    .hello {
        color:red;
    }
    

    (3)src/index.jsx

    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    
    import Hello from '../component/hello.jsx';
    import './index.scss';
    
    ReactDOM.render(
        <div className="page">
            <Hello />
        </div>,
        document.getElementById('page')
    );
    

    (4)src/index.scss

    .page {
        font-size:20px;
    }
    

    (5)src/index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="../dist/index.css">
    </head>
    <body>
        <div id="page"></div>
    
        <script src="../dist/index.js"></script>
    </body>
    </html>
    

    3. 编译运行

    (1)编译并监控文件改变

    $ webpack --watch
    

    (2)浏览器打开src/index.html


    参考

    webpack
    extract-text-webpack-plugin
    Github - 源码

    相关文章

      网友评论

        本文标题:[React] webpack+babel+react+sass

        本文链接:https://www.haomeiwen.com/subject/avhizttx.html