从零开始,使用Webpack4配置属于自己的React项目及源码（实现count小例子）

前言：使用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/
            }