webpackhtml中的js,普通html用webpack打包

本文目錄一覽：

• 1、Webpack 怎麼改 html 中的 js 路徑
• 2、調用webpack打包後的js中的函數報錯問題
• 3、webpack打包Js文件

Webpack 怎麼改 html 中的 js 路徑

在HTML文件中如果有

“`html

script src=”./src/js/A.js”/script

script src=”./src/js/B.js”/script

“`

wepack之後，A，B的源碼合併並壓縮為bundle.js

有什麼方法可以改為

“`html

script src=”./build/js/bundle.js”/script

“`

調用webpack打包後的js中的函數報錯問題

今天用原生js和jquery動態生成一個表單彈窗，因為想在使用的時候只引入一個js文件，所以想到用webpack將js和css打包到一起，這樣就不用單獨引入css文件了，結果使用過程中還是踩了一些坑。

文件裡面js函數較多有生成dom的有校驗的有提交表單獲取值的，在這我只說一下出現問題的js函數，表單所有dom結構都是動態生成的，有兩個點擊事件是用原生js直接寫到html標籤上面的，一個方法是用來關閉表單一個方法是用來提交表單。

還有一個方法是給外部調用觸發生成表單彈窗的方法

通過webpack打包後在頁面中引入打包後的js文件，直接調用questionnaire方法打開控制台發現報未定義

webpack打包後的js文件中的方法和變數都變成了局部的，外部無法直接訪問。解決辦法：修改上面三個方法的定義方式

將上面三個方法都改為顯式添加到全局，打包後引入js調用方法即可正常顯示。

前面的兩個方法因為是在html中直接調用的所以還有另一種處理方法：添加事件監聽

打包引入後發現同樣是可以的。

webpack打包Js文件

a .

注意點:index.js就是需要打包的文件打包之後的文件會放到dist目錄中, 名稱叫做main.js

b .

這句指令的含義是: 利用webpack將index.js和它依賴的模塊打包到一個文件中

其實在webpack指令中除了可以通過命令行的方式告訴webpack需要打包哪個文件以外,

還可以通過配置文件的方式告訴webpack需要打包哪個文件

這句指令的含義是將webpack將index.js和他依賴的模塊打包到一個文件中

其實webpack打包指令除了可以通知要打包哪些文件，還可以通過配置

2.2webpack常見配置

剛才是輸入npx webpack index.js 那麼現在就可以輸入npx webpack了

如果想要使用其他指令，可以直接修改的 package.json 的scirpts

以後再打包的時候，就可以直接使用npm run test了；

當然，還可以看下devtool的取值，他生成的sourcemap映射表，對打包後的包的大小和打包速度有很大影響