webpack4 0配置記錄（1）

趁著假期閒暇，練習下webpack4.0的一些配置。

let uglifyjsplugin = require("uglifyjs-webpack-plugin");

let optimizecssassetsplugin = require("optimize-css-assets-webpack-plugin");
optimization: ),//開發環境下不壓縮js，想啟用壓縮功能，需要把mode切換為production
new optimizecssassetsplugin({})
]},

詳情見npm官網

expose-loader 暴露全域性loader，稱為內聯loader。到目前為止，有內聯loader，普通normal loader，前置loader (pre loader)，後置loader （post loader）

webpack.config.js配置

let webpack =require('webpack');

plugins:[//存放webpack外掛程式
new webpack.provideplugin()
],

provideplugin給每個模組提供$

cdn方式引入不打包，webpack需要配置externals

new minics***tractplugin(),

}}

(1)增加原始碼對映檔案，便於除錯。標示報錯檔案行和列，大而全檔案

devtool:'source-map'

devtool:'eval-source-map'

devtool:'cheap-module-source-map'

devtool:'cheap-module-eval-source-map'

watch:true,

watchoptions:,

new cleanwebpackplugin('./dist')//先清空dist目錄下的檔案在打包

new copywebpackplugin([

//可以寫多個，拷貝多個目錄檔案
])

//新增版權注釋資訊

new webpack.bannerplugin('make by mgl 2019-2-1')

npm run dev

proxy:

}}

res.json();

})}

(3)有服務端，不用**來處理，在服務端中啟動webpack，用服務端埠

//express

let express = require('express');
let webpack=require('webpack');
//引入中介軟體
let middle=require('webpack-dev-middleware');
let config=require('./webpack.config.js');
let compiler=webpack(config);//webpack處理返回結果
res.json();
})

resolve:

},

手寫webpack4 0的配置

webpack詳解 webpack是乙個打包工具，他的宗旨是一切靜態資源即可打包。有人就會問為什麼要webpack？webpack是現代前端技術的基石，常規的開發方式，比如jquery,html,css靜態網頁開發已經落後了。現在是mvvm的時代，資料驅動介面。webpack將現代js開發中的各種新...

webpack4 0基本用法

總結了一下webpack4.0基本用法，基本上所有配置都有注釋說明，超級詳細啊！dist是打包目錄 js壓縮外掛程式 const htmlplugin require html webpack plugin 實現html打包功能，引用好路徑的到html來 const glob require glo...

webpack4 0 相關外掛程式集

let htmlwebpackplugin require html webpack plugin 網頁模板外掛程式 let minics tractplugin require mini css extract plugin 樣式打包外掛程式 let optimizecss require opt...