創(chuàng)建基本webpack4.0項(xiàng)目
1要拂、運(yùn)行cnpm init -y快速初始化項(xiàng)目
2厌殉、再項(xiàng)目根目錄創(chuàng)建src和dist目錄
3民镜、再src目錄下面創(chuàng)建index.html文件
4、安裝webpackcnpm install webpack webpack-cli -D
如果運(yùn)行
webpack打包的時(shí)候提示
image.png
需要運(yùn)行cnpm install webpack-cli -g
5冲杀、新建webpack.config.js文件
//向外暴露一個(gè)打包的配置對(duì)象
module.exports = {
mode: 'development'
}
6、安裝cnpm install webpack-dev-server -D
image.png
然后就可以使用
npm run dev運(yùn)行項(xiàng)目7模蜡、自動(dòng)打開(kāi)index頁(yè)面
安裝
cnpm i html-webpack-plugin -D
const path = require('path')
//導(dǎo)入再內(nèi)存中自動(dòng)生成index頁(yè)面的插件
const HtmlWebPackPlugin = require('html-webpack-plugin')
//創(chuàng)建一個(gè)插件實(shí)例
const htmlPlugin = new HtmlWebPackPlugin({
//path.join拼接路徑
//__dirname當(dāng)前文件所再的內(nèi)存目錄漠趁，就是項(xiàng)目的跟目錄
template: path.join(__dirname, './src/index.html'),//源文件
filename: 'index.html' //生成的內(nèi)存中首頁(yè)的名稱
})
//向外暴露一個(gè)打包的配置對(duì)象
module.exports = {
mode: 'development',//development production
plugins: [
htmlPlugin
]
}
