前言：默认意见安装好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/
}