這篇文章主要介紹了webpack如何打包并將文件加載到指定的位置，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
使用webpack打包，最爽的事情莫過于可以直接require文件了，但是這
同時帶來了一個問題，就是所有的文件整合到一起，那這一個包就太大了。
基于此：下面我們來了解下webpack的打包（主要是將如何將我們需要的內(nèi)容模塊，分開打包，
并且按照我們自己設(shè)定的存放路徑進行存放）
首先在webpack.config.js文件中
entry入口函數(shù)出表示出哪些是需要單獨打包成一個js包的：
重慶分公司
重慶分公司
entry: {
main: path.resolve(__dirname,'src/index.js'),
jq: ['jquery'],
react: ['react'],
redom: ['react-dom']
},
output: {
path: path.resolve(__dirname,'dist'),
publishPath: 'dist/',
filename: '[name].js'
},
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存放在指定的位置又要如何進行操作呢，不用著急，下面就來具體
的實現(xiàn)以下（其實區(qū)別主要是在entry入口函數(shù)那兒）：
entry: {
'./common/main': path.resolve(__dirname,'src/index.js'),
'./jquery/jq': ['jquery'],
'./react/react': ['react'],
'./reactdom/redom': ['react-dom']
},如上所示這樣四個js就會分別存放到我們制定的dist下的四個文件夾中了。（標(biāo)注：這時候就不
需要用到webpack.optimize.CommonsChunkPlugin插件了）
最后貼上左右的webpack.config.js代碼：
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: {
'./common/main': path.resolve(__dirname,'src/index.js'),
'./jquery/jq': ['jquery'],
'./react/react': ['react'],
'./reactdom/redom': ['react-dom']
},
output: {
path: path.resolve(__dirname,'dist'),
publishPath: 'dist/',
filename: '[name].js'
},
module: {
loaders: [
{
test: /\.scss$/,
loader: 'style!css!sass'
},
{
test: /\.js$/,
exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\/|presets\//,
loader: 'babel'
},
{
test: /\.(png|jpg|gif)$/,
loader: 'url?limit=40000'
}
]
},
babel: {
presets: ['es2015','stage-0','react'],
plugins: ['transform-runtime',["antd",{"style": "css"}]]
},
resolve: ['js','jsx','css'],
plugins:[
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"window.jQuery":"jquery"
})
// new webpack.optimize.CommonsChunkPlugin('jq','jq.js'),
// new webpack.optimize.CommonsChunkPlugin('vendors','vendors.js'),
// new webpack.optimize.CommonsChunkPlugin('redom','redom.js')
]
};感謝你能夠認真閱讀完這篇文章，希望小編分享的“webpack如何打包并將文件加載到指定的位置”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
