使用webpack打包，最爽的事情莫過于可以直接require文件了，但是這
同時帶來了一個問題，就是所有的文件整合到一起，那這一個包就太大了。
基于此：下面我們來了解下webpack的打包（主要是將如何將我們需要的內容模塊，分開打包，
并且按照我們自己設定的存放路徑進行存放）
首先在webpack.config.js文件中
entry入口函數出表示出哪些是需要單獨打包成一個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存放在指定的位置又要如何進行操作呢，不用著急，下面就來具體
的實現以下（其實區別主要是在entry入口函數那兒）：
entry: { './common/main': path.resolve(__dirname,'src/index.js'), './jquery/jq': ['jquery'], './react/react': ['react'], './reactdom/redom': ['react-dom'] },如上所示這樣四個js就會分別存放到我們制定的dist下的四個文件夾中了。（標注：這時候就不
需要用到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打包并將文件加載到指定的位置方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
