打包html資源 · 前端

新建目錄文件 mkdir webpack-test ~~~ npm init npm install webpack webpack-cli -g npm install webpack webpack-cli --save-dev ~~~ 下載lhtml-webpack-plugin插件 ~~~ npm i html-webpack-plugin -D ~~~ **webpack.config.js** 作用：當運行webpack指令時，會自動加載這里面的配置 ~~~ //引入插件 const HtmlWebpackPlugin = require('html-webpack-plugin'); //resolve用來解決絕對路徑的 const {resolve} = require('path'); module.exports = { mode:'development',//development和production //打包的入口文件 entry: './src/index.js', output: { //輸出路徑，__dirname是nodejs的變量代表當前文件的目錄絕對路徑 path: resolve(__dirname, 'dist'), //打包輸出的文件名 filename: 'build.js' }, module: { rules: [ ] }, plugins: [ //html-webpack-plugin默認創建一個空的HTML，自動引入打包輸出所有資源（js/css） new HtmlWebpackPlugin(); //如果我們需要src/index.html頁面的結構，需要一個template參數復制./src/index.html文件，并自動引入打包輸出所有資源（js/css） new HtmlWebpackPlugin({template: './src/index.html'}) ] }; ~~~ src/index.html ``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>site title</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1 id="title">hello world!</h1> </body> </html> ``` src/index.js ~~~ document.write("It works."); ~~~ dist/index.html new HtmlWebpackPlugin();時生成的頁面 ``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>site title</title> </head> <body> <script src="./built.js" type="text/javascript"></script> </body> </html> ``` dist/index.html new HtmlWebpackPlugin({template: './src/index.html'});時生成的頁面 ``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>site title</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1 id="title">hello world!</h1> <script src="./built.js" type="text/javascript"></script> </body> </html> ```