使用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 的配...