手写webpack配置React环境

一直用React脚手架做项目，今天突发奇想，想自己用webpack搭建了一下react的环境，结果真是历经千辛万苦，各种少模块，各种不兼容，最后终于成功了。保存下来以后好直接拿来用！

webpack.config.js

const baseConfig = require("./config/base")
const devConfig = require("./config/dev")
const prodConfig = require("./config/prod")

module.exports = function(param){
    let config = null;
    if(param === "prod"){
        config = {
            ...baseConfig,
            ...prodConfig.config,
        };
        config.output.filename = prodConfig.filename;
    }else{
        config = {
            ...baseConfig,
            ...devConfig
        }
    }
    return config;
}

config中的base.js

let config = {
    entry :{
        main: "./src/main.js" //入口文件
    },
    output: {
        path: __dirname + "/../dist",//生成的目录 
        filename: 'js/[name].js' //生成js
    }
}

module.exports = config;

config中的dev.js 这里是开发打包

const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin")

const config = {
    mode: "development",
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",  //你的首页
            minify:{
                collapseWhitespace:true
            }
        }),
        new ExtractTextWebpackPlugin("css/style.css")
    ],
    module:{
        rules:[
            {
                test: /\.css$/,
                use:ExtractTextWebpackPlugin.extract({
                    fallback: "style-loader",//从哪里取出样式
                    use:["css-loader",{
                        loader: "postcss-loader",
                        options: {
                            plugins: [
                                require("autoprefixer")
                            ]
                        }
                    }]//顺序是由后向前查找
                })
            },
            {
                test: /\.scss$/,
                use: ExtractTextWebpackPlugin.extract({
                    fallback: "style-loader",
                    use:['css-loader',{
                        loader:"postcss-loader",//自动兼容前缀
                        options:{
                            plugins:[
                                require("autoprefixer")//自动兼容前缀
                            ]
                        }
                    },"sass-loader"]
                })
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, //除这个文件夹以外
                loader: 'babel-loader',
                query:{
                    presets: ['es2015','react']
                }
            }
        ]
    }
}

module.exports = config;

config中的prod.js  这里是上线打包 

const config = {
    mode : "production",
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",  //你的首页
            minify:{
                collapseWhitespace:true
            }
        }),
        new ExtractTextWebpackPlugin("css/style.css")
    ],
    module:{
        rules:[
            {
                test: /\.css$/,
                use:ExtractTextWebpackPlugin.extract({
                    fallback: "style-loader",//从哪里取出样式
                    use:["css-loader",{
                        loader: "postcss-loader",
                        options: {
                            plugins: [
                                require("autoprefixer")
                            ]
                        }
                    }]//顺序是由后向前查找
                })
            },
            {
                test: /\.scss$/,
                use: ExtractTextWebpackPlugin.extract({
                    fallback: "style-loader",
                    use:['css-loader',{
                        loader:"postcss-loader",//自动兼容前缀
                        options:{
                            plugins:[
                                require("autoprefixer")//自动兼容前缀
                            ]
                        }
                    },"sass-loader"]
                })
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, //除这个文件夹以外
                loader: 'babel-loader',
                query:{
                    presets: ['es2015','react']
                }
            }
        ]
    }
}
module.exports = {
    config,
    filename: "js/[name]_[hash].js"  //自动生成后缀
}

package.json

{
  "name": "reactdome",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "build": "webpack --env prod",
    "dev": "webpack --watch",
    "start": "npm run dev"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.4.10",
    "babel": "^6.23.0",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^2.1.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  },
  "browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ],
  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4"
  }
}

把上面几个文件建好以后，在新建一个src文件夹，新建index.html首页文件和main.js入口文件，这样就完事了！

直接运行npm install 下载所有的模块，运行npm start 是测试打包 运行npm run build 是上线打包！