1.运行 npm init -y 快速初始化项目

2.在项目根目录中创建dist文件夹和src文件夹

• 2.1 在src文件夹里面创建 index.html和index.js

3.使用cnpm 安装webpack，运行 cnpm i webpack webpack-cli -D

全局安装 cnpm  
npm i cnpm -g

注意：webpack4.x提供了约定大于配置的概念；目的是为了尽量减少配置文件的体积；

• 默认约定了：
• 打包的入口是 src->index.js
• 打包的输出文件是 dist->main.js

4.安装 cnpm i webpack-dev-server -D 启动热更新

• 4.1 在package.json文件里面设置

  "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "start": "webpack --config webpack.config.js",
   "dev": "webpack-dev-server --open --hot" 
  },
  

--open --hot 默认打开和热更新

5.使用cnpm 安装html-webpack-plugin，运行 cnpm i html-webpack-plugin -D 默认打开index文件

• 5.1 在webpack.config.js文件（自己创建）里面设置

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin') //导入自动生成index文件

const htmlPlugin = new HtmlWebPackPlugin({
 template:path.join(__dirname,'./src/index.html'),//源文件
 filename:'index.html'//生成在内存中首页的名称
})


module.exports={
 mode:'development',
 plugins:[
   htmlPlugin
 ]
}

6.使用babel 转换jsx

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D
cnpm i babel-preset-react -D

.babelrc 文件内容
{
 "presets":["env","stage-0","react"],
 "plugins": ["transform-runtime"]
}
//webpack.config.js
module:{ //要打包的第三方模块
   rules:[{
     test:/\.js|jsx$/,
     use:'babel-loader',
     exclude:/node_modules/ //排除项
   }]
 }Ï

使用babel转换jsx

7.省略文件后缀名配置和配置全局根目录

配置根目录和省略后缀名