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項目。

相關標籤/搜索

react+webpack+redux+react

webpack+react+redux+react

使用

redux+react+webpack

react+typescript+webpack

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。