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