- 第一步npm init
項(xiàng)目初始化尖阔，會(huì)在項(xiàng)目根目錄下面創(chuàng)建一個(gè)的package.json文件桥帆，該文件包含項(xiàng)目信息、依賴等信息
（也可以從其他項(xiàng)目拷貝或者自己新建一個(gè)package.json文件） -
搭建項(xiàng)目結(jié)構(gòu)
微信截圖_20211226154036.png - 安裝基礎(chǔ)依賴
npm install webpack webpack-cli webpack-dev-server --save-dev
webpack-cli：作用是可以使用webpack指令
webpack-dev-server：webpack+httpserver 他會(huì)把編譯好的文件放到內(nèi)存中同時(shí)起一個(gè)http服務(wù)，這樣可以跑本地調(diào)試代碼 - 安裝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語法轉(zhuǎn)換成es5淳梦，babel7以上的版本只用這一個(gè)預(yù)設(shè)包就可以實(shí)現(xiàn)語法的轉(zhuǎn)換了，已經(jīng)廢棄了preset-stage-0,perset-stage-1,perset-stage-2等這些包了逊笆，但是這個(gè)包還不能轉(zhuǎn)換es6拂苹，es7的一些新特性例如Array.includes()，這就需要我們使用@babel/plugin-reansform-runtime了
@babel/plugin-transform-runtime 支持一些es6华糖，es7的新語法 把每個(gè)文件中的使用preset-env轉(zhuǎn)換成的helper函數(shù) --> 轉(zhuǎn)換成使用babel-runtime中的helper函數(shù)麦向，減少包體積
@babel/runtime 這個(gè)包是 在進(jìn)行es6轉(zhuǎn)換成es5的時(shí)候會(huì)生成很多helper函數(shù)，這些函數(shù)每一個(gè)文件轉(zhuǎn)換都會(huì)重復(fù)生成客叉，這個(gè)包里面會(huì)包含這些helper函數(shù)诵竭，這樣每個(gè)文件中引入helper函數(shù)的時(shí)候就直接引用這個(gè)包里面的文件了，減少了每個(gè)文件的包體積
- 創(chuàng)建webpack.config.js文件
當(dāng)前使用的是webpack的默認(rèn)命令兼搏，所以要更改的話需要指定webpack命令執(zhí)行時(shí)的配置文件卵慰。
const path = require("path")
module.exports = {
// 指定構(gòu)建環(huán)境
mode: "development",
//入口 這里路徑是相對于項(xiàng)目的根目錄的 所以這里是 ./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/, // 這個(gè)node_modules文件夾里面的js/jsx文件不需要使用babel-loader
loader: 'babel-loader'
// babel-loader的參數(shù)配置也可以這樣寫，我們這里是新建一個(gè).babelrc文件的方式來配置
// use: {
// loader: 'babel-loader',
// options: {
// presets: ['@babel/preset-env']
// }
// }
}
]
}
}
6.創(chuàng)建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選項(xiàng)
// 安裝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,// 注入選項(xiàng) 有四個(gè)值 true,body(script標(biāo)簽位于body底部),head,false(不插入js文件)
hash:true,//回給script標(biāo)簽中的js文件增加一個(gè)隨機(jī)數(shù) 防止緩存 bundle.js?22b9692e22e7be37b57e
})
]
項(xiàng)目啟動(dòng)問題
報(bào)錯(cuò)：Error: Cannot find module 'webpack-cli/bin/config-yargs'
原因：webpack-cli的新版本對webpack-dev-server版本的不兼容佛呻，這里記錄一下我實(shí)驗(yàn)可行的版本對照：
node： 10.16.1
webpack: 5.66.0
webpack-cli: 3.3.12
webpack-dev-server: 3.11.0
