React使用——webpack

时间 2019-11-11

标签 react 使用 webpack 栏目 React 繁體版

原文原文链接

新建目录：javascript

　　demo（文件夹）css

　　　　　　——views（文件夹）html

　　　　　　　　　　——demo.htmljava

　　　　　　——app（文件夹）node

　　　　　　　　　　——components（文件夹）react

　　　　　　　　　　　　　　　　——demo.jsxwebpack

　　　　　　　　　　——js（文件夹）web

　　　　　　　　　　　　　　　　——demo_1.jsnpm

　　　　　　　　　　　　　　　　——demo_2.jsjson

　　　　　　　　　　——css（文件夹）

　　　　　　　　　　　　　　　　——demo.css

　　　　　　　　　　——main.js（入口文件）

编辑内容：

一、demo.html的内容为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React使用——webpack</title>
</head>
<body>
    <div id="demo"></div>

    <!-- 这里引入的js文件是把全部js打包后的文件 -->
    <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

二、demo.jsx的内容为：

//ES6的写法
import React from 'react';       //引入react
import styles from '../css/demo.css';    //导入相应css的样式

//建立组件类：名字首字母必须大写
class demo extends React.Component {
    render() {
        return (
            // react里面类名必定要用className由于class是关键字
            //使用cssModule添加类名的方法避免全局污染
            <div className={styles.demo}>Hello World!</div>
        )
    }
}

//导出组件
export default demo;

三、main.js的内容为：

// 引入react
import React from 'react';
// 引入react-dom
import ReactDOM from 'react-dom';
// 引入demo.jsx这个组件，import后面引用的组件必定要大写
import Demo from './components/demo.jsx';


// 引用demo_1和demo_2这两个模块
var demo_1 = require('./js/demo_1.js');
var demo_2 = require('./js/demo_2.js');


// 重构dom树，经过id找到demo这个元素，而且将Demo这个组件显示出来
ReactDOM.render(
    <Demo />,
    document.getElementById('demo')
);

四、demo.css的内容为：

.demo{
    color:red;
}

五、demo_1.js的内容为：

console.log("你看，我demo_1被打包执行了哟~~~");

六、demo_2.js的内容为：

console.log("你看，我demo_2被打包执行了哟~~~");

使用Webpack：

　　一、npm install -g webpack //全局安装

　　二、npm install --save-dev webpack //安装到你的项目目录

　　三、npm init //自动帮你建立package.json文件

　　四、npm install --save-dev webpack //安装Webpack依赖包

　　五、根目录瞎新建webpack的配置文件webpack.config.js，内容为：

module.exports = {
    devtool: "eval-source-map", //使得编译后的代码可读性更高，也更容易调试

    entry: __dirname + "/public/main.js", //已屡次说起的惟一入口文件
    　　output: {　　　　　　　　
        path: __dirname + "/views", //文件打包后的文件存放的地方
        filename: "bundle.js" //打包后输出文件的文件名
        // 至关于将你全部的js文件打包成一个js文件，变成bundle.js文件
    },

    // 使webpack能实现对不一样格式的文件的处理
    module: {
        rules: [
            // 处理jsx或者js文件
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            // 处理css文件
            {
                test: /\.css$/, // 同时引入CSS module，Webpack对CSS模块化提供了很是好的支持
                use: [{ //只须要在CSS loader中进行简单配置便可，而后就能够直接把CSS的类名传递到组件的代码中，这样作有效避免了全局污染。
                    loader: "style-loader"
                }, {
                    loader: "css-loader",
                    options: {
                        modules: true, // 指定启用css modules
                        localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
                    }
                }]
            }
        ]
    }

}

　　六、.babelrc的内容为（webpack会自动调用.babelrc里的babel配置选项，方便之后babel配置选项过多）：

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

　　七、修改package.json文件

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"   //此处是方便咱们直接经过npm start打包，package.json里不要有注释
  }

　　八、安装babel依赖项：

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

　　九、安装ES6和JSX支持的React 和 React-DOM：

npm install --save react react-dom

　　十、安装webpack提供两个工具处理样式表，css-loader 和 style-loader

npm install --save-dev style-loader css-loader

　　十一、npm start再开打你的demo.html

总结一下：webpack打包工具为咱们提供了方便，经过main.js文件将全部的文件打包成bundle.js文件输出到views文件夹里面，减小了多而乱的<srcipt>标签的引用，同时webpack打包工具还有更多的功能，能够参考一下其余博客，我这里也只是一个简单的demo，经过react和webpack的学习相信作出更多的demo项目。