webpack配置React开发详解版

文档

React官方文档的学习
webpack的配置
webpack的babel-loader的配置

文件夹的解释

1. dist用来放入打包后的文件（生产时）
2. src这是我们开发时的文件（css和less主要是这里用来测试的）
3. index.html（我们的页面，放一个容器来让其他元素渲染进去）

<div id="app"></div>

4. webpack.config.js是我们的配置文件

const path = require('path') //使用node的path模块，来操作文件路径
module.exports = {
   
    entry:path.join(),
    output:{
   
    },
    plugins:[
    ],
    module: {
   
        rules: [      
        ]
      }
}

webpack入口出口配置

• entry:入口起点，来构建webpack其作为依赖图的开始，进入入口起点后，webpack会找出哪些模块和库是入口起点依赖的,这里是main.js

entry:path.join(__dirname,'/src/main.js'),

• output:告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件,这里我们使用output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成(emit)到哪里。

    output:{
   
        path:path.join(__dirname,'/dist'),
        filename:'bundle.js'
    },

webpack和package.json和插件

• 下载package.json;这里用来存放我们开发环境和生产环境需要的包和配置，不使用-y是选择自己配置，在项目根目录运行它

cnpm init -y

• 下载webpack-dev-server：我们每次都要使用webpack进行打包编译，比较麻烦，所以我们使用该包来实现打包编译；它会将编译的文件注入内存，这样速度会比较快

cnpm i webpack-dev-server  -D

• 同时，使用html-webpack-plugin插件配置启动页面,如果我们只使用webpack-dev-server该包的话还要配置–contentBase指定启动目录指令比较繁琐，所以使用该包会自主在内存帮我们注入，不用我们手动注入

cnpm i html-webpack-plugin -D

• 接下来看一下package.json查看开发依赖,看看是否成功下载

  "devDependencies": {
   
    "html-webpack-plugin": "^3.2.0",
    "webpack-dev-server"