Webpack4 + React + Mobx 自己搭建项目编译环境

Webpack是啥？不说多解释，更不想说什么React 和Mobx的作用。我认为很多人学习React，是因为工作需要，大部分也都是用手脚架在开发。毕竟这是快速入门的好方法，我也是这样的。写这个目的是记录一下 别忘记了自己的体会。

第一步  创建一个空文件夹，其实就是你的项目目录

mkdir test-react-demo

npm init

执行 npm init 后可以一路回车。里面是项目的信息当然你可以查询一下，这些信息都是用来做什么的，不多解释。

第二步 添加Webpack    不多说了这个必须添加

npm i webpack -D


npm i webpack-cli -D

webpack-cli在编译的时候需要用到，下图是版本

"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"

第三步骤 安装 React和Mobx支持   都是安装不解释

npm i react react-dom -S
npm i mobx mobx-react -S

"mobx": "^5.9.0",
"mobx-react": "^5.4.3",
"react": "^16.8.3",
"react-dom": "^16.8.3",

第四步 看是配置webpack-config.js 文件作用自然是webpack如何编译我们的项目了

在项目目录内 新建文件webpack。同时在文件内新建webpack-config.js 。当然我是这样创建的，看着清晰。

const path = require("path");//node自带 无选安装
const HTMLPLUGIN = require("html-webpack-plugin");//webapck 插件 需要单独安装
module.exports = {
    entry: {
        app: path.join(__dirname, '../src/index.js') //工程入口文件
    },
    output:{
        filename: '[name].[hash].js',//输出文件名称
        path: path.join(__dirname, '../dist'),//输出文件路径
        publicPath:''//静态资源文件前缀 
    },
    plugins:[
        new HTMLPLUGIN() //自动生成html文件的插件好用
    ],
    module:{
        rules:[
            {//将js文件交给babel-loader 解析
                test: /.js$/,
                loader: "babel-loader",
                exclude: [//忽略node_modules
                    path.join(__dirname, "../node_modules")
                ]
            },
            {//将css文件交给他们来解析
                test: /.css$/,
                use:[
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader"
                    }
                ]
            },
            {//处理图片的解析器
                test: /.(jpg|png|jpeg)$/,
                loader:"url-loader"
            }
        ]
    }
}

packjson.json

{
  "name": "test-react-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack-dev-server --config webpack/webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "mobx": "^5.9.0",
    "mobx-react": "^5.4.3",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "webpack-dev-server": "^3.2.1"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.3.4",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2015-loose": "^8.0.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  }
  
}

还有一个就是.babelrc文件

{
    "presets":[
        ["es2015", {"loose": true}],
        "react",
        "env", 
        "stage-0"
    ],
    "plugins": [
        "syntax-decorators",
        "transform-decorators-legacy"
    ]
}