您好,登錄后才能下訂單哦!
小編給大家分享一下怎么操作webpack處理文件,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
使用webpack打包,最爽的事情莫過(guò)于可以直接require文件了,但是這
同時(shí)帶來(lái)了一個(gè)問(wèn)題,就是所有的文件整合到一起,那這一個(gè)包就太大了。
基于此:下面我們來(lái)了解下webpack的打包(主要是將如何將我們需要的內(nèi)容模塊,分開打包,
并且按照我們自己設(shè)定的存放路徑進(jìn)行存放)
首先在webpack.config.js文件中
entry入口函數(shù)出表示出哪些是需要單獨(dú)打包成一個(gè)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') ]
如上配置,這樣在文件生成的時(shí)候dist目錄下就會(huì)增加jq.js,vendors.js,redom.js這三個(gè)js了
以上解決了我們要打包多個(gè)包的問(wèn)題;
那如果我們想要將打包好的js存放在指定的位置又要如何進(jìn)行操作呢,不用著急,下面就來(lái)具體
的實(shí)現(xiàn)以下(其實(shí)區(qū)別主要是在entry入口函數(shù)那兒):
entry: { './common/main': path.resolve(dirname,'src/index.js'), './jquery/jq': ['jquery'], './react/react': ['react'], './reactdom/redom': ['react-dom'] },
如上所示這樣四個(gè)js就會(huì)分別存放到我們制定的dist下的四個(gè)文件夾中了。(標(biāo)注:這時(shí)候就不
需要用到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處理文件”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。