環境主要依賴版本
- webpack@4.8.1
- webpack-cli@2.1.3
- webpack-dev-server@3.1.4
- react@16.3.2
- babel-core@6.26.3
- babel-preset-env@1.6.1
- bable-preset-react@6.24.1
webpack安裝及配置
1. 起步
新建項目目錄，初始化npm，新建開發源目錄
mkdir webpack-react && cd webpack-react npm init -y mkdir src 2.webpack-cli
webpack從4.x版本開始，需要同時安裝webpack，webpack-cli(此工具用於在命令行中運行webpack)。
npm install webpack webpack-cli --save-dev 3.wepback配置文件
在項目根目錄新建webpack.config.js文件，此文件為webpack運行核心文件。
webpack.config.js 基本配置
// webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', // 入口文件 output: { // webpack打包后出口文件 filename: 'app.js', // 打包后js文件名稱 path: path.resolve(__dirname, 'dist') // 打包后自動輸出目錄 } } package.json 文件 scripts配置
"scripts": { "build": "webpack" } 此時在命令行運行npm run build，就能執行webpack了，webpack會自動去找項目根目錄里的webpack.config.js文件，執行打包。
npm run build
// webpack打包后的項目 ├── dist │ └── app.js // 打包后的app.js ├── package.json ├── src │ └── index.js // 源目錄入口文件 └── webpack.config.js webpack.config.js module相關配置
webpack 視所有文件都為模塊，圖片，css文件，字體等靜態資源都會打包進js文件，所以會需要用到loader文件，更多Loaders可以查詢網址，接下來我們安裝一些必要的Loader文件。
npm install style-loader css-loader url-loader --save-dev webpack.config.js加入module模塊
module.exports = { entry: './src/index.js', output: { filename: 'app.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.(png|svg|jpg|gif)$/, use: ['url-loader'] }, { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['url-loader'] } ] } } 引入loader后，就可以在你的src/index.js文件import你想引入的css文件或者其他靜態資源。
cd src && touch main.css src/index.js 文件引入css
import "./main.css"; webpack.config.js plugins配置
主要的js文件和靜態文件都能成功打包成一個js文件后，我們需要把這個js文件放到html文件里，webpack插件***html-webpack-plugin***就是干這個事兒的，它能自動生成一個html文件並把我們打包好的js文件放入html。
npm install html-webpack-plugin --save-dev webpack.config.js 配置plugins
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入插件 module.exports = { entry: './src/index.js', output: { filename: 'app.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.(png|svg|jpg|gif)$/, use: ['url-loader'] }, { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['url-loader'] } ] }, plugins: [ new HtmlWebpackPlugin({title: 'production'}) // 配置plugin ] }; 執行npm run build后，我們可以看到dist目錄多出一個index.html文件。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>name</title> </head> <body> // 打包后的app.js已經被自動插入了html文件 <script type="text/javascript" src="app.js"></script></body> </html> 到這里，webpack最簡單最基本的需求已經配置完畢。 此時項目結構為：
├── dist // 生產目錄 │ ├── app.js │ └── index.html ├── package.json ├── src // 源目錄 │ ├── index.js │ └── main.css └── webpack.config.js React 的webpack配置
安裝react
npm install react react-dom --save 安裝react，wepback轉換依賴
React組件由JSX組成，瀏覽器無法識別JSX，需要babel進行轉換。
- babel-croe 為babel核心文件
- babel-preset-env 將ES6轉義成ES5
- babel-preset-react 將JSX轉義成js
- babel-loader webpack的babe轉換
npm install babel-core babel-preset-env babel-preset-react babel-loader --save-dev .babelrc配置文件
在項目根目錄下新建.babelrc文件，此文件為bable核心配置，babel會自動在項目根目錄下識別。
// .babelrc { "presets": ["env", "react"] } webpack babel-loader 配置
// 在webpack.config.js 的modules.rules中加入此配置 { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } html-webpack-plugin 模板配置
我們知道react需要獲取頁面一個根元素，然后render才會生效，我們可以新建一個html文件，讓html-webpack-plugin插件基於這個文件來進項打包。
所以我們在根目錄下新建一個html文件，以此文件作模板。
// index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> // react需要的渲染根元素 <div id="root"></div> </body> </html> 此時webpack.config.js配置:
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { filename: 'app.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }, { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.(png|svg|jpg|gif)$/, use: ['url-loader'] }, { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['url-loader'] } ] }, plugins: [ new HtmlWebpackPlugin({ title: 'production', template: './index.html' // 模板文件位置 }) ] }; 書寫React，運行webpack
// src/index.js import React from 'react'; import ReactDom from 'react-dom'; import './main.css' ReactDom.render( <h1>hello world</h1>, document.getElementById('root') ); 運行npm run build，生成dist目錄，打開dist目錄中的index.html文件，可以發現瀏覽器已正常渲染"hello world"。
dev環境熱更新配置
react的wepack完成以后，是不是發現每修改一次代碼，想看到效果，得重新打包一次才行。webpack-dev-server配置可以幫助我們實現熱更新，在開發環境解放我們的生產力。
安裝webpack-dev-server
npm install webpack-dev-server --save-dev webpack.config.js 配置
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack'); module.exports = { entry: './src/index.js', output: { filename: 'app.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }, { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.(png|svg|jpg|gif)$/, use: ['url-loader'] }, { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['url-loader'] } ] }, plugins: [ new HtmlWebpackPlugin({ title: 'production', template: './index.html' }), // hot 檢測文件改動替換plugin new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin() ], // webpack-dev-server 配置 devServer: { contentBase: './dist', hot: true }, }; 運行webpack-dev-server
在 package.json 文件 加入 scripts 配置：
"scripts": { "build": "webpack", "dev": "webpack-dev-server --open --mode development" // webpack-dev-server }, 命令行運行 npm run dev
可以在瀏覽器中輸入localhost:8080 內容即為dist目錄下的index.html內容。修改src/index.js中的內容或者依賴，即實時在瀏覽器熱更新看到。
至此，react的webpack的基礎開發環境已全部配置完畢。