手動搭建webpack4框架（二）

module: , //處理 css 檔案的 loader

, //處理 的 loader
, //處理 字型的 loader
, , ] }, //處理 sass 檔案的 loader
, //處理 less 檔案的 loader
, //處理 .vue 檔案的 loader
],['@babel/plugin-proposal-class-properties', ],
"@babel/plugin-transform-runtime"]}
},exclude: /node_modules/
}, //處理 es6 的 loader
]},

然後在plugins陣列下new 一下vueloaderplugin

plugins: [ //配置外掛程式

​ new vueloaderplugin(), //webpack4配置中啟用 vue-loader 必須啟用 否則會報錯

//使用多個配置

//這個檔案被其他配置檔案依賴
const path = require('path');
const htmlwebpackplugin = require('html-webpack-plugin'); //實現 檔案的自動打包和引入
const cleanwebpackplugin = require('clean-webpack-plugin'); //清除快取中上一次打包的不用的檔案
const vueloaderplugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');
module.exports = ,
output: ,
plugins: [ //配置外掛程式
new htmlwebpackplugin(),
new cleanwebpackplugin(), //清除快取中上一次打包的不用的檔案
new webpack.hotmodulereplacementplugin(), //熱更新所需外掛程式
new webpack.namedmodulesplugin(), //熱更新所需外掛程式
new vueloaderplugin(), //webpack4配置中啟用 vue-loader 必須啟用 否則會報錯
],resolve: 
}}

//定義開發配置

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, ,
optimization: 
},module: , //處理 css 檔案的 loader
, //處理 的 loader
, //處理 字型的 loader
, , ] }, //處理 sass 檔案的 loader
, //處理 less 檔案的 loader
, //處理 .vue 檔案的 loader
],['@babel/plugin-proposal-class-properties', ],
"@babel/plugin-transform-runtime"]}
},exclude: /node_modules/
}, //處理 es6 的 loader
/* 
}} */]},
})

//定義生產配置

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const minics***tractplugin = require('mini-css-extract-plugin'); //壓縮 css 檔案
module.exports = merge(common, , //處理 css 檔案的 loader
, //處理 的 loader
, //處理 字型的 loader
, , ] }, //處理 sass 檔案的 loader
, //處理 less 檔案的 loader
, //處理 .vue 檔案的 loader
],['@babel/plugin-proposal-class-properties', ],
"@babel/plugin-transform-runtime"]}
},exclude: /node_modules/
}, //處理 es6 的 loader]},
plugins: [
new minics***tractplugin()
]})

"scripts": ,

注：同時在webpack.prod.js中做一些跨域配置，不過在後台解決跨域問題，比在前台解決跨域問題跟簡單哦。有關前台解決跨域問題可以看以下文章：

webpack4配置詳解

方式一 單檔案寫法 entry 方式二 多檔案寫法 entry output 常用的有三種 模板描述 hash模組識別符號的hash,一般應用於filename name hash js chunkhash按需載入塊內容的hash，根據chunk自身的內容計算而來,js name chunkhash...

webpack4快速上手

1.在專案根目錄cnpm init y初始化。生成package.json檔案 2.在專案裡面使用cnpm安裝webpack 3.需要在根目錄下新建webpack.config.js檔案 在其裡面配置暴露物件 module.exports 4.在根目錄下新建src index.js檔案 因為此時執行...

webpack4 基本使用

webpack是基於node構建，所以wepack支援所有node api和語法。即 chrome瀏覽器能支援的ecmascript語法 排除dom bom wbpack都能支援。chrome不支援es6，所以webpack也不支援。建立基本的webpack4.x專案 建立後的目錄 其中 packa...