webpack打包並將檔案載入到指定的位置

2021-07-15 09:27:23 字數 1349 閱讀 5146

使用webpack打包,最爽的事情莫過於可以直接require檔案了,但是這

同時帶來了乙個問題,就是所有的檔案整合到一起,那這乙個包就太大了。

基於此:下面我們來了解下webpack的打包(主要是將如何將我們需要的內容模組,分開打包,

並且按照我們自己設定的存放路徑進行存放)

首先在webpack.config.js檔案中

entry入口函式出表示出哪些是需要單獨打包成乙個js包的:

entry: ,

output: ,

plugin: [

new webpack.optimize.commonschunkplugin('jq','jq.js'),

new webpack.optimize.commonschunkplugin('vendors','vendors.js'),

new webpack.optimize.commonschunkplugin('redom','redom.js')

]

如上配置,這樣在檔案生成的時候dist目錄下就會增加jq.js,vendors.js,redom.js這三個js了

以上解決了我們要打包多個包的問題;

那如果我們想要將打包好的js存放在指定的位置又要如何進行操作呢,不用著急,下面就來具體

的實現以下(其實區別主要是在entry入口函式那兒):

entry: ,
如上所示這樣四個js就會分別存放到我們制定的dist下的四個資料夾中了。(標註:這時候就不

需要用到webpack.optimize.commonschunkplugin外掛程式了)

最後貼上左右的webpack.config.js**:

var webpack = require('webpack');

var path = require('path');

module.exports = ,

output: ,

module: ,,]

},babel: ]]

},resolve: ['js','jsx','css'],

plugins:[

new webpack.provideplugin()

//new webpack.optimize.commonschunkplugin('jq','jq.js'),

//new webpack.optimize.commonschunkplugin('vendors','vendors.js'),

//new webpack.optimize.commonschunkplugin('redom','redom.js')

]};

webpack未能載入打包音訊檔案

在 webpack 中,我們發現,在專案中直接把 包括音訊 路徑拿過來使用是行不通的,要在 require 或者 import 引入之後才能使用這些資源。這是因為 webpack 會把當作模組來使用,而不是直接以字串的形式 模組化是 node 程式設計的核心理念之一 import 解決方式 使用 f...

webpack打包檔案

webpack.config.js是自己建立的打包檔案 在檔案的跟目錄下 引用html webpack plugin 首先要 npm install html webpack plugin s 在命令列中執行一下 let path require path 引入這個檔案就不會把相對路徑變成絕對路徑 ...

webpack 打包html檔案

webpack.config.js配置檔案內容為 用來拼接絕對路徑的方法 const require path const htmlwebpackplugin require html webpack plugin module.exports loader 配置 module plugins 的配...