window搭建webpack，react，babel傻瓜教程

時間 2019-11-24

標籤 window 搭建 webpack react babel 傻瓜教程欄目 Windows 简体版

原文原文鏈接

　　首先如今的webpack教程已經不少了，寫這篇的緣由是由於本身在從小白開始的搭建過程當中，並無找到比較好的教程，花費了不少的時間，so 有了這篇博客，方便小白同窗學習。javascript

　　node環境在這裏不在贅述，package.json文件以下css

{
  "name": "wn",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot --inline"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "css-loader": "^0.23.1",
    "node-sass": "^3.8.0",
    "react": "^15.3.0",
    "react-dom": "^15.3.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^2.1.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
}

　　這裏面有個坑，就是babel-preset-react這個插件，babel-loader中es2015這個插件是解析es6語法的，babel-preset-react這個插件是解析react語法的，在mac中這個插件集成在了es2015中，可是window中並無集成，致使編譯失敗，這點你們注意。html

　　拿到這個文件，直接命令行npm install安裝完畢。ps："start": "webpack-dev-server --hot --inline"這項配置是輸入npm start時執行的指令，這裏會啓動localhost:8080接口，在這個頁面會保存後自動刷新。java

　　接下來是webpack.config.js文件，這裏面的註釋我寫的還算多，不在解釋。node

　　這裏有官網的loader列表，你們能夠自行添加使用http://webpack.github.io/docs/list-of-loaders.htmlreact

module.exports = {
    //在log中定位源文件位置，跟sass的sourcemap同樣
    devtool: 'source-map',
    //webpack-dev-server配置
    devServer: {
        historyApiFallback: true,
        hot: true,
        inline: true,
        progress: true,
    },
    //頁面入口文件配置
    entry: 'page/index.js',
    //入口文件輸出配置
    output: {
        filename: 'bundle.js'
    },
    module: {
        //加載器配置，這些loader會解析不一樣格式的文件，而後一塊兒打包成js文件
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'},
            { test: /\.js$/, loader: "babel-loader", query: {presets: ['es2015','react']}}
        ]
    },
    //其它解決方案配置
    resolve: {
        //自動擴展文件後綴名，意味着咱們require模塊能夠省略不寫後綴名
        extensions: ['', '.js', '.json', '.scss', '.styl'],
    }
};

　　下面是首頁index.htmlwebpack

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World app</title>
  </head>
  <body>
      <div id='app'></div>
  </body>
  <script type="text/javascript" src='bundle.js'></script>
</html>

　　index.js文件git

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <div>hello world</div>,
  document.getElementById('app')
)

　　文件目錄es6

　　在根目錄執行npm start後，打開瀏覽器http://localhost:8080，每次修改文件後頁面都會自動刷新，這個打包在內存中，不會生成打包後扥文件。github

　　bundle文件在執行webpack命令後會打包出來。

　　下一篇會加上react-router和redux等更高級的庫，再見！

1. Mobx和Mobe-React傻瓜式教程
2. LeanCloud 傻瓜教程
3. scrapinghub 傻瓜教程
4. React+webpack+Babel項目搭建及配置
5. webpack+babel+ES6+react環境搭建
6. 使用 Babel + React + Webpack 搭建 Web 應用
7. Webpack+Babel+React的快速搭建
8. React開發環境搭建（react,babel,webpack webpack-dev-server)
9. Webpack Babel React
10. webpack+babel+react
更多相關文章...
• Swift 環境搭建 - Swift 教程
• Rust 環境搭建 - RUST 教程
• Java 8 Stream 教程
• YAML 入門教程

相關標籤/搜索

傻瓜

webpack+babel+react

react+babel+webpack

webpack+babel+es6+react

npm+webpack+babel+react

react+webpack+antd+babel

react+webpack+babel+webpcak

每日一句

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