學習vue之前，先學習前段打包工具--webpack，本文就是分享了關於webpack的學習，有興趣的朋友可以看一下
#最近由於專案用到了vue，之前一直久聞大名，但是知之甚少，趁此機會學習vue。
學習vue之前，先學習了前段打包工具--webpack，目前非常優秀且使用廣泛的打包工具。參考webpack官方教程進行學習，不過官方教程目前是基於webpack3的，而實際使用的是webpack4，目前有一些比較大的差異，也做了些總結，在這裡做一個簡單的記錄，方便以後回顧學習。
一webpack概念
webpack是一種靜態編譯工具(預編譯)[static module bundle]，區別於seaJs和requireJS(線上編譯)，類似javac和jit的差異
webpack中的幾個概念
#入口文件，webpack編譯的入口，webpack查找所有依賴的root，最終會將所有的依賴進行關聯
編輯結果（bundles）輸出位置，以及輸出結果如何命名等
#webpack用於處理各種文件，loader可以處理使用import引入的所有文件（理論上）。 loader需要設定在module.rules中，它有兩個必填屬性：test(處理哪些檔案)和use(使用哪個loader)，如果設定錯誤，webpack會報錯
plugin用於處理各種任務，它的範圍和作用比loader大，使用時需要使用require()引入，並將其加入到plugins中。若因為不同目的多次使用外掛程式需要使用new來初始化外掛程式
二環境分離
webpack3中使用webpack.DefinePlugin外掛程式來實現不同環境分離：development和production
new webpack.DefinePlugin({
//许多 library 将通过与 process.env.NODE_ENV 环境变量关联，以决定 library 中应该引用哪些内容
// 在webpack4中mode会自动设置该信息，废弃该配置
"process.env.NODE_ENV": JSON.stringify("development")
})登入後複製
在webpack4中使用該方式已經無效，需要使用新提供的mode來指定不同的環境。
mode分為development和production，且必須設定一種，否則會報錯誤提示。
// 环境设置，webpack4必须有该值，使用该属性来设置不同的环境，目前有development和production两种，也可以使用：--mode development设置
// process.env.NODE_ENV会被该设置覆盖
mode:"development",
登入後複製
三 source map
在webpack4中預設使用eval，可以透過設定devtool:"inline-source-map"來更改預設值。在production環境中建議使用"source-map"
四程式碼分離
4.1 分離CSS等
使用外掛程式extract-text-webpack-plugin來將css和js分離。官方範例：
https://doc.webpack-china.org...
具體設定如下：
// 将CSS分离 https://doc.webpack-china.org/plugins/extract-text-webpack-plugin
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//使用extractTextPlugin就不能在单独使用style-loader
config.module:{
rules:[
{
test:/\.css$/,
use : ExtractTextPlugin.extract({
fallback : "style-loader",
//这样使用会出现url()解析路径错误的问题
//use : "css-loader"
//使用该方式解决url()路径问题
use:[
{
loader:"css-loader",
options:{
//用于解决url()路径解析错误
url:false,
minimize:true,
sourceMap:true
}
}
]
})
},
]
}登入後複製
4.2 拆分公共模組
由於CommonChunkPlugin已被webpack4廢棄，webpack4推薦使用SplitChunkPlugin來擷取公共模組。由於webpack官網(https://webpack.js.org)上面該...，網上資料介紹又不是很詳細，綜合網上搜尋結果，終於實現了公共模組的分離，但是還是有很多疑問沒有解決，後面還需要在找相關資料。
可以參考官方的例子：https://github.com/webpack/we...
具體的配置如下：
使用SplitChunkPlugin有兩種方式：
#一、optimization .splitChunks
optimization: {
//提取公共模块，webpack4去除了CommonsChunkPlugin，使用SplitChunksPlugin作为替代
//主要用于多页面
//例子代码 https://github.com/webpack/webpack/tree/master/examples/common-chunk-and-vendor-chunk
//SplitChunksPlugin配置，其中缓存组概念目前不是很清楚
splitChunks: {
// 表示显示块的范围，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为all;
chunks: "all",
// 表示在压缩前的最小模块大小，默认为0；
minSize: 30000,
//表示被引用次数，默认为1
minChunks: 1,
//最大的按需(异步)加载次数，默认为1；
maxAsyncRequests: 3,
//最大的初始化加载次数，默认为1；
maxInitialRequests: 3,
// 拆分出来块的名字(Chunk Names)，默认由块名和hash值自动生成；设置ture则使用默认值
name: true,
//缓存组，目前在项目中设置cacheGroup可以抽取公共模块，不设置则不会抽取
cacheGroups: {
//缓存组信息，名称可以自己定义
commons: {
//拆分出来块的名字,默认是缓存组名称+"~" + [name].js
name: "test",
// 同上
chunks: "all",
// 同上
minChunks: 3,
// 如果cacheGroup中没有设置minSize，则据此判断是否使用上层的minSize，true：则使用0，false：使用上层minSize
enforce: true,
//test: 缓存组的规则，表示符合条件的的放入当前缓存组，值可以是function、boolean、string、RegExp，默认为空；
test:""
},
//设置多个缓存规则
vendor: {
test: /node_modules/,
chunks: "all",
name: "vendor",
//表示缓存的优先级
priority: 10,
enforce: true
}
}
}
}登入後複製
第二種：new webpack.optimize.SplitChunksPlugin
具體配置同optimization.splitChunks
五熱替換
#。 ##使用以下配置實作：
在webpack3中使用如下配置
//查看要修补(patch)的依赖,被optimization.namedModules代替，development模式下默认开启，显示模块的相对路径
new webpack.NamedModulesPlugin(),
// 热替换插件
new webpack.HotModuleReplacementPlugin(),
登入後複製
在webpack4中NamedModulesPlugin已經作為預設設置，在development模式下會自動開啟，不用進行該項配置
六tree shaking
webpack4在development模式下並不會使用Tree shaking,在production模式下才開啟。可以使用uglifyjs-webpack-plugin來壓縮混淆代碼
七 懶加載
使用import()來引入需要的模組，這部分是在方法中調用，而不是js開頭。
建議使用vue,react等框架自帶的懶加載實作
############################################
以上是vue學習筆記(1)--webpack學習的詳細內容。更多資訊請關注PHP中文網其他相關文章！
