else{
????config.entry?=?{
????????app:?path.join(__dirname,'./src/index.js'),
????????vendor:['vue']?
????};
????config.output.filename?=?'[name].[chunkhash:8].js';
????config.module.rules.push({
????????test:?/\.styl/,
????????use:?ExtractPlugin.extract({
????????????fallback:'style-loader',
????????????use:[
????????????????'css-loader',
????????????????{
????????????????????loader:?"postcss-loader",
????????????????????options:?{
????????????????????????sourceMap:true,
????????????????????}
????????????????},
????????????????'stylus-loader'
????????????]
????????})
????});
????config.plugins.push(
????????????new?ExtractPlugin('styles.[chunkHash:8].css'),
????);
????config.optimization?=?{
????????splitChunks:?{
????????????cacheGroups:?{
????????????????commons:?{
????????????????????chunks:?'initial',
????????????????????minChunks:?2,?maxInitialRequests:?5,
????????????????????minSize:?0
????????????????},
????????????????vendor:?{
????????????????????test:?/node_modules/,
????????????????????chunks:?'initial',
????????????????????name:?'vendor',
????????????????????priority:?10,
????????????????????enforce:?true
????????????????}
????????????}
????????},
????????runtimeChunk:?true
????}
}

module.exports?=?config;

//webpack4問題解決：
const?path?=?require('path');
const?VueLoaderPlugin?=?require('vue-loader/lib/plugin');

const?isDev?=?process.env.NODE_ENV?===?'development';?/*package.json里面的dev判斷*/

const?HTMLPlugin?=?require('html-webpack-plugin');
const?webpack?=?require('webpack');

//css分離打包?mini-css-extract-plugin??extract-text-webpack-plugin@next
const?ExtractPlugin?=?require('extract-text-webpack-plugin');

const?config??=?{
//module.exports?=?{
????target:?'web',
????entry:?path.join(__dirname,'./src/index.js'),
????output:?{
????????//?filename:?"bundle.js",
????????filename:?"bundle.[hash:8].js",?/*正式環(huán)境與開發(fā)環(huán)境進(jìn)行區(qū)分*/
????????path:?path.join(__dirname,'dist'),
????},
????module:?{
????????rules:?[
????????????{
????????????????test:/\.vue$/,???/*使用vue-loader處理.vue文件*/
????????????????loader:?'vue-loader'
????????????},/*{
????????????????test:?/\.css$/,
????????????????use:['style-loader','css-loader'],
????????????},*/
????????????{
????????????????test:?/\.(jpg|jpeg|png|gif|svg)$/,
????????????????use:?[{
????????????????????????loader:'url-loader',
????????????????????????options:?{
????????????????????????????limit:1024,
????????????????????????????name:'[name]-picf.[ext]'
????????????????????????}
????????????????????}]
????????????},{
????????????????test:?/\.jsx$/,
????????????????loader:?'babel-loader'
????????????}
????????]
????},
????/*錯誤提示：asset(s)?最大限制在244K。解決：修改webpack?的性能提示配置?*/
????performance:?{
????????hints:'warning',???/*或者直接關(guān)閉hints:false*/
????????//入口起點(diǎn)的最大體積
????????maxEntrypointSize:?50000000,
????????//生成文件的最大體積
????????maxAssetSize:?30000000,
????????//只給出?js?文件的性能提示
????????assetFilter:?function(assetFilename)?{
????????????return?assetFilename.endsWith('.js');
????????}
????},
????plugins:[
????????new?VueLoaderPlugin(),?/*Vue-loader在15.*之后的版本的使用都是需要帶有VueLoaderPlugin的，還需另外單獨(dú)配置css-loader*/
????????new?webpack.DefinePlugin({
????????????'process.env':{
????????????????NODE_ENV?:?isDev?'"development"':'"production"'
????????????}
????????}),
????????/*如果'"development"'不加引號，那么最后解析會變成process.env.NODE_ENV=development，沒有development這個變量?缺少引號*/
????????new?HTMLPlugin(),
????],
};

if(isDev){
????config.devtool?=?'#cheap-module-eval-source-map';/*在瀏覽器上頁面可以調(diào)試，不加的話是vue，es6等的編譯代碼*/
????config.devServer?=?{
????????port:8001,
????????host:'localhost',/*既可以通過localhost:8000訪問到，又可以通過127.0.0.1:8000,別人也可以通過自己的ip訪問到*/
????????overlay:{
????????????errors:true?/*有任何錯誤都顯示到網(wǎng)頁*/
????????},
????????hot:true?/*原來修改東西?頁面自動刷新??現(xiàn)在不刷新，只更新內(nèi)容*/
????????/*historyFallback:{?//單頁應(yīng)用的映射?}*/
???????//?open:true,/*修改文件后默認(rèn)打開瀏覽器*/
????};
????config.plugins.push(
????????new?webpack.HotModuleReplacementPlugin(),
????????new?webpack.NoEmitOnErrorsPlugin(),
????);
????config.module.rules.push({
????????test:?/\.styl/,??/*注意這里沒有$結(jié)束符，這樣既可以匹配styl文件，又可以匹配stylus*/
????????use:?[
????????????'style-loader',
????????????'css-loader',
????????????{
????????????????loader:?"postcss-loader",
????????????????options:?{
????????????????????sourceMap:true,
????????????????}
????????????},
????????????'stylus-loader'
????????]
????})
}else{
????config.entry?=?{
????????app:?path.join(__dirname,'./src/index.js'),
????????vendor:['vue']??/*將框架與業(yè)務(wù)代碼單獨(dú)打包，是瀏覽器盡可能久地緩存框架代碼而不隨著業(yè)務(wù)修改而刷新*/
????};
????config.output.filename?=?'[name].[chunkhash:8].js';
????config.module.rules.push({
????????test:?/\.styl/,
????????use:?ExtractPlugin.extract({
????????????fallback:'style-loader',
????????????use:[
????????????????'css-loader',
????????????????{
????????????????????loader:?"postcss-loader",
????????????????????options:?{
????????????????????????sourceMap:true,
????????????????????}
????????????????},
????????????????'stylus-loader'
????????????]
????????})
????});
????config.plugins.push(
????????????new?ExtractPlugin('styles.[chunkHash:8].css'),
????);
????config.optimization?=?{
????????splitChunks:?{
????????????cacheGroups:?{
????????????????commons:?{
????????????????????chunks:?'initial',
????????????????????minChunks:?2,?maxInitialRequests:?5,
????????????????????minSize:?0
????????????????},
????????????????vendor:?{
????????????????????test:?/node_modules/,
????????????????????chunks:?'initial',
????????????????????name:?'vendor',
????????????????????priority:?10,
????????????????????enforce:?true
????????????????}
????????????}
????????},
????????runtimeChunk:?true
????}
}

module.exports?=?config;

new webpack.optimize.SplitChunksPlugin({

name: 'vendor'

}),

new webpack.optimize.SplitChunksPlugin({

name: 'vendor'

}),

按照樓上配置得到左邊截圖效果，可是怎樣打包到指定路徑呢？

https://www.skiy.net/201803014983.html

https://www.webpackjs.com/guides/code-splitting/

按官方的文檔來做的，竟然不是最新的，也是醉了

請問您也姓佘嗎？咱倆同姓，你在哪里

感謝感謝?。。?/p>