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.省略文件后缀名配置和配置全局根目录
配置根目录和省略后缀名
