webpack專案建立步驟
阿新 • • 發佈:2020-12-06
1、在專案根目錄執行 npm init -y
命令快速初始化專案
2、在專案根目錄建立 src 原始碼目錄和 dist 產品目錄
3、在src目錄下建立index.html檔案
4、使用npm安裝webpack,webpack-cli, 執行如下命令即可
npm i webpack webpack-cli -D
5、專案根目錄下新建webpack.config.js檔案,進行相關配置
module.exports = { mode: 'development', // mode, 有development和production 開發模式和生產模式兩種 // entry: './src/index.js' // 入口檔案配置,可不進行配置,約定預設指向src目錄下的index.js 檔案,也可自定義配置 }
6、執行命令 webpack 專案即進行webpack打包,會在dist目錄下自動生成main.js檔案,在src目錄下index.html檔案中引入該main.js檔案即可生效
webpack
// 在每次修改程式碼後都需要執行 webpack 命令重新打包後才可生效,我們一般希望每次修改程式碼儲存後就可打包完成,而不是每次都需要執行 webpack命令,由此引入 webpack-dev-server 外掛
7、webpack-dev-server
實時打包
webpack-dev-server 打包好的main.js是託管到了記憶體中,所以在專案中有一個看不見的main.js
安裝webpack-dev-server,執行如下命令
npm i webpack-dev-server -D
在package.json檔案中做如下配置
"scripts": {
"dev": "webpack-dev-server"
}
做完上述配置即可執行 npm run dev
命令啟動專案,執行在 localhost:8080
,這時index.html檔案中js檔案引入應改為 <script src="/main.js"></script>
根目錄下那個看不見的main.js
這時想訪問index.html檔案需要訪問地址 localhost:8080/index.html
,我們希望localhost:8080
html-webpack-plugin
webpack.config.js
const path = require('path') // 引入path 模組,後續會用到
const HtmlWebpackPlugin = require('html-webpack-plugin') // html-webpack-plugign 是node 中的一個模組,可直接用require引入
然後建立 HtmlWebpackPlugin 的例項物件
const htmlPlugin = new HtmlWebpackPlugin({
template: path.join(_dirname, './src/index.html'), // 原始檔模板,這裡指向src下的index.html
filename: 'index.html' // 生成記憶體中的首頁名稱
})
plugins: [htmlPlugin] // 外掛放到webpack.config.js的配置物件中
這時再執行 npm run dev
即可在localhost:8080中訪問到index.html的內容