- 第一步npm init
项目初始化，会在项目根目录下面创建一个的package.json文件，该文件包含项目信息、依赖等信息
（也可以从其他项目拷贝或者自己新建一个package.json文件） -
搭建项目结构
微信截图_20211226154036.png - 安装基础依赖
npm install webpack webpack-cli webpack-dev-server --save-dev
webpack-cli：作用是可以使用webpack指令
webpack-dev-server：webpack+httpserver 他会把编译好的文件放到内存中同时起一个http服务，这样可以跑本地调试代码 - 安装loader
npm install babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/runtime @babel/runtime-corejs3 --save-dev
@babel/core: babel的核心库
@babel/preset-env : 把es6,es7语法转换成es5，babel7以上的版本只用这一个预设包就可以实现语法的转换了，已经废弃了preset-stage-0,perset-stage-1,perset-stage-2等这些包了，但是这个包还不能转换es6，es7的一些新特性例如Array.includes()，这就需要我们使用@babel/plugin-reansform-runtime了
@babel/plugin-transform-runtime 支持一些es6，es7的新语法 把每个文件中的使用preset-env转换成的helper函数 --> 转换成使用babel-runtime中的helper函数，减少包体积
@babel/runtime 这个包是 在进行es6转换成es5的时候会生成很多helper函数，这些函数每一个文件转换都会重复生成，这个包里面会包含这些helper函数，这样每个文件中引入helper函数的时候就直接引用这个包里面的文件了，减少了每个文件的包体积
- 创建webpack.config.js文件
当前使用的是webpack的默认命令，所以要更改的话需要指定webpack命令执行时的配置文件。
const path = require("path")
module.exports = {
// 指定构建环境
mode: "development",
//入口 这里路径是相对于项目的根目录的 所以这里是 ./src/index.js
entry: {
app: './src/index.js'
},
output: {
path: path.resolve("../dist"),
filename: 'js/[name].js',
publicPath: "/" //打包后的资源的访问路径前缀
},
//处理模块资源
module: {
rules: [
{
//处理js文件
test: /\.js?$/,
exclude: /node_modules/, // 这个node_modules文件夹里面的js/jsx文件不需要使用babel-loader
loader: 'babel-loader'
// babel-loader的参数配置也可以这样写，我们这里是新建一个.babelrc文件的方式来配置
// use: {
// loader: 'babel-loader',
// options: {
// presets: ['@babel/preset-env']
// }
// }
}
]
}
}
6.创建babel的配置文件.babelrc
{
"presets": [
["@babel/preset-env",{
"modules":false,
"targets":{
"browsers":["> 1%","last 2 versions","not ie<=8"]
}
}],
"@babel/preset-react"
],
"plugins": [
["@babel/plugin-transform-runtime",{
"corejs":3,
"useBUildIns":"usage"
}]
]
}
- 修改package.json中的script
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config ./webpack.config.js",
"build": "webpack --config ./webpack.config.js"
},
- 配置入口html -- html-webpack-plugin插件
npm install html-webpack-plugin --save-dev
修改webpack.config.js:
// build/webpack.config.js 增加plugins选项
// 安装html-webpack-plugin
const HtmlWebpackPlugin = require("html-webpack-plugin")
plugins:[
new HtmlWebpackPlugin({
filename:path.resolve(__dirname,"../dist/index.html"),
template:path.resolve(__dirname,"../public/index.html"),
inject:true,// 注入选项 有四个值 true,body(script标签位于body底部),head,false(不插入js文件)
hash:true,//回给script标签中的js文件增加一个随机数 防止缓存 bundle.js?22b9692e22e7be37b57e
})
]
项目启动问题
报错：Error: Cannot find module 'webpack-cli/bin/config-yargs'
原因：webpack-cli的新版本对webpack-dev-server版本的不兼容，这里记录一下我实验可行的版本对照：
node： 10.16.1
webpack: 5.66.0
webpack-cli: 3.3.12
webpack-dev-server: 3.11.0
