#### 0.react依賴 PS: yarn add react PS: yarn add react-dom #### 1.index.js PS: md src PS: New-Item index.js 打開index.js加入以下代碼 ```javascript import React from 'react' import { render } from 'react-dom' window.React = React render( <div>init react</div>, document.getElementById('react-container') ) ``` #### 2.init webpack.config PS: New-Item webpack.config.js 打開webpack.config.js寫入一下相關配置 ```javascript var webpack = require("webpack") var path = require("path") process.noDeprecation = true module.exports = { entry: "./src/index.js", output: { path: path.join(__dirname, 'dist', 'assets'), filename: "bundle.js", sourceMapFilename: 'bundle.map' }, devtool: '#source-map', module: { rules: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['env','stage-0','react'] } } }, { test: /\.css$/, use: ['style-loader','css-loader', { loader: 'postcss-loader', options: { plugins: () => [require('autoprefixer')] }}] }, { test: /\.scss/, use: ['style-loader','css-loader', { loader: 'postcss-loader', options: { plugins: () => [require('autoprefixer')] }}, 'sass-loader'] } ] }, plugins: [ new webpack.DefinePlugin({ "process.env": { NODE_ENV: JSON.stringify("production") } }) // 此版本webpack已經沒有UglifyJsPlugin的壓縮了，需要修改package下的scripts就可以了 // 下邊就講到了 /* new webpack.optimize.UglifyJsPlugin({ sourceMap: true, warnings: false, mangle: false })*/ ] } ``` ### 3.完善package ```json "scripts": { "build": "webpack --mode production", "prestart": "npm run build", "start": "opener http://localhost:3001 & httpster -p 3001 -d ./dist" } ``` #### 4.完善index.html 在body最后，加入打包文件鏈接 ```html <script src="assets/bundle.js"></script> ```