前言：使用react16.8+webpack4配置的項目，項目已經完成es6編譯配置，安裝命令用紅體字標出
1.項目目錄結構說明及源碼下載
其他前端有趣的例子和坑合集：https://github.com/wqhui/CodeDemo
源碼地址：https://github.com/wqhui/reactDemo
實現的webpack配置項
- jsx、es6語法解析
- 簡單開發服務 webpack-dev-server
- html模板，會自動引入打包的js
- less解析
- css和js簡單分離
- css自動添加瀏覽器前綴
- url 配置
feature
- UglifyJsPlugin
- BannerPlugin
- DllReferencePlugin
下載完成後解壓後還要解壓node_module.zip壓縮包，解壓完node_module壓縮包，命令行進入，輸入npm run dev即可運行項目。
├── package.json
├── postcss.config.js
├── src
│ ├── action （action文件夾
│ │ ├── action.js
│ │ ├── actionnames.js
│ │ └── countAction.js
│ ├── app.js
│ ├── component （組件文件夾
│ │ ├── Count.js
│ │ └── Count.less
│ ├── index.js （入口文件
│ ├── index.tmpl.html
│ ├── reducer （reduecer 配置
│ │ └── index.js
│ └── store （strore文件夾
│ └── store.js
└── webpack.config.js webpack配置
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-stage-0 babel-preset-es2015 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/
}