使用webpack和react搭建項目

時間 2019-11-08

標籤使用 webpack react 搭建項目欄目 React 简体版

原文原文鏈接

看了N多博客，日誌，一邊迷茫一邊摸索。本文記錄流程。我怕本身忘了。。。而且修復了博客園首頁推薦那個日誌中遇到的bugjavascript

一、webstorm新建一個空白項目，好比webpack_democss

二、由於要用react和es6語法，調整webstorm-設置-語言-javascript-jsx，肯定。這樣文件不會報錯。html

三、新建app（存放入口文件，component組件），static（存放打包後的文件），webpack（存放webpack配置文件）三個文件夾java

四、在webpack_demo根目錄，打開cmd或者終端，輸入npm init，一路回車node

五、完成後，繼續輸入npm install webpack -g。完成webpack的配置react

六、在app中新建main.js；在webpack中新建配置文件webpack.config.js；在static中新建一個index.html；在static中新建一個js目錄webpack

七、在index頁面寫如下內容es6

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>webpack_Demo</title>
</head>
<body>
<div class="content">
</div>
<script src="./js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

View Code

八、配置webpack.config.jsweb

var path = require("path");

module.exports = {
    entry:{　　//入口文件
        "app":path.join(__dirname,"../app/main.js")  //app對應生成的文件名
    },
    output:{
        path:path.join(__dirname,"../static/js/"),
        filename:"[name].js"   //這裏[name]就是表示對應entry對象的name，而後生成的後戳是.js
    }
}

View Code

九、隨便在main.js寫點什麼，好比alertnpm

十、在cmd中運行

　webpack --config ./webpack/webpack.config.js

View Code

十一、成功後訪問index.html，沒成功重複上面的操做

十二、每次編譯都很煩，能夠在package.json中添加對應的配置，代碼以下

{
  "name": "web_pack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack --config ./webpack/webpack.config.js" //添加一個build 值是打包用到的命令
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^3.0.0"
  }
}

View Code

1三、再次運行npm run build

1四、安裝配置webpack-dev-server，實現熱更新。

　　一、在cmd中執行npm i webpack-dev-server --save-dev

　　二、在package.json中修改scripts

 "test": "node_modules\.bin\webpack-dev-server --config ./webpack/webpack.config.js --port 8089 --open",

View Code

　　三、index頁面的js，使用絕對路徑，好比 http://localhost:8089/app.js

　　四、cmd中執行 npm run test，能夠開啓一個本地服務器，每次更改代碼後，自動刷新頁面

1五、繼續安裝react，在cmd中執行 npm i babel babel-core babel-loader babel-preset-es2015 babel-preset-react react react-dom --save

1六、在main.js中隨便寫點react的代碼，好比hello world

1七、在webpack.config.js添加babel-loader用來解析jsx和es6

var path = require("path");

module.exports = {
    entry:{
        "app":path.join(__dirname,"../app/main.js") 
    },
    output:{
        path:path.join(__dirname,"../static/js/"),
        filename:"[name].js"       
    },
    module:{
        loaders:[
            {
                test:/\.(js|jsx)$/,    
                loader:"babel-loader",
                exclude:/node_module/,    
                query:{
                    presets:["react","es2015"]        
                }
            }
        ]
    }
}

View Code

1八、這個時候若是以上都正確，瀏覽器會自動刷新出helloworld

1九、能夠再下載style-loader和css-loader處理樣式