前言：默認意見安裝好Node和Npm，安裝命令用紅體字標出
1.項目工程配置
新建一個文件夾，然後在文件夾上打開終端，輸入npm init -yes完成項目初始化，會生成一個package.json記錄整個項目的依賴包信息。目錄結構如下
2.安裝Webpack和React並配置
安裝react npm i react react-dom redux react-redux redux-thunk react-router --save-dev
在目錄src下新建 index.tml.html 文件（這個後面會講到使用webppac配置html模板）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
在目錄src下新建 index.js 文件：
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>這裏是一個簡單的示例頁面啊</h1>,
document.getElementById('root')
);
安裝bable，用來解析js文件的loader及插件去解析jsx和es6語法：npm i babel-cli babel-loader babel-preset-env babel-preset-react babel-plugin-react-transform react-transform-hmr --save-dev ，在項目根目錄新建並配置.babelrc文件:
{
"presets": ["env", "react"]
}
安裝webpack npm i webpack webpack-cli webpack-dev-server --save-dev ，在項目根目錄新建並配置webpack.config.js:
/*
* @Author: qinghui_wu
* @Date: 2018-11-04 17:56:24
* @Last Modified by: qinghui_wu
* @Last Modified time: 2018-11-10 16:07:04
*/
const path=require('path');
const ROOT_PATH = path.resolve(__dirname);
module.exports = {
entry: './src/index.js',//入口文件
output: {//輸出
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
devServer: {
contentBase: require('path').join(__dirname, "dist"),//設置服務器訪問的基本目錄
compress: true,
port: 8088,//端口
host: "localhost",
inline: true,//實時刷新
},
module: {
rules: [
//這裏配置loader ,對象形式配置
]
},
plugins: [
//這裏配置插件
]
};
配置啓動命令，在package.json中的scripts中添加:
"dev": "webpack-dev-server --mode development --open",
這樣在文件夾終端就可以使用 npm run dev 啓動項目
配置解析.js和.jsx文件的loader：
{
test: /\.(js|jsx)$/,
exclude: path.resolve(__dirname, 'node_modules'),//忽略查找
include: path.resolve(__dirname, 'src'),//查找
use: {
loader: "babel-loader"
}
}
安裝配置webpack插件html-webpack-plugin，npm i html-webpack-plugin --save-dev
const HtmlWebPackPlugin = require("html-webpack-plugin");//引用都放在const path=require('path');旁邊
//這段放在plugins下
new HtmlWebPackPlugin({
template: ROOT_PATH + "/src/index.tmpl.html",//index html 模板
filename: 'index.html',// 生成文件名
minify: {
collapseWhitespace: true, //把生成的 index.html 文件的內容的沒用空格去掉，減少空間
},
hash: true, //爲了更好的 cache，可以在文件名後加個 hash。
}),
安裝配置分離js和css插件、清理無效文件插件，npm i mini-css-extract-plugin clean-webpack-plugin --save-dev，（這裏用mini-css-extract-plugin替代ExtractTextPlugin）
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//分離css和js 配置style loader使用
const CleanWebpackPlugin = require('clean-webpack-plugin');//清理無效文件
//這段放在plugins下
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css"
}),
new CleanWebpackPlugin(['dist'])//實例化，參數爲目錄
安裝配置樣式文件解析相關loader，這裏使用less和css，npm install less less-loader css-loader style-loader postcss-loader autoprefixer -D，
{
test: /\.(css|less)$/, //樣式loader
use:[
MiniCssExtractPlugin.loader,
{
loader:"css-loader",
options:{
modules: true, // 指定啓用css modules
localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的類名格式
}
},
"postcss-loader",//自動添加前綴
"less-loader"
]
}
配置postcss-loader自動添加前綴（autoprefixer），在和webpack.config.js同級目錄添加postcss.config.js
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['iOS >= 7', 'Android >= 4.1',
'last 10 Chrome versions', 'last 10 Firefox versions',
'Safari >= 6', 'ie > 8']
},
}
}
安裝配置圖片、字體文件的解析用的loader，npm i file-loader url-loader --save-dev，
{
test: /\.(png|jpg|gif|woff|svg|eot|woff2|tff)$/,
use: 'url-loader?limit=8129', //limit的參數，當你圖片大小小於這個限制的時候，會自動啓用base64編碼圖片
exclude: /node_modules/
}