webpack簡介：
- webpack 是一個(gè)前端資源加載/打包工具。 他將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源
為什么使用webpack：
- 轉(zhuǎn)換Es6語法
- 轉(zhuǎn)換JSX
- css預(yù)處理器/前綴補(bǔ)全
- 圖片壓縮
- 壓縮混淆——不讓源代碼邏輯直接暴露
一. webpack安裝：
- 安裝 node.js —— 要使用webpack,必須確保電腦上存在著node.js這個(gè)運(yùn)行環(huán)境
- 安裝webpack —— 在命令行輸入命令 npm install webpack -g
- npm 是 node.js 管理插件用的工具，install表安裝， -g表全局安裝
- 在命令行輸入 webpack -v 查看其是否安裝成功，并查看其版本
二. 配置文件出入口
- 首先創(chuàng)建一個(gè)文件 ： webwebpack.config.js —— 這個(gè)文件就當(dāng)作我們的配置文件
entry：
1. 單個(gè)entry（寫法1）： module.exports = { entry: './input.js' 當(dāng)前入口文件叫做 input.js } 2. 單個(gè)entry（寫法2）： module.exports = { entry: { main: '.input.js' } }; 3.多個(gè)entry module.exports = { entry : { hame : './home.js', about:'./about.js' other:'./other.js' } } 復(fù)制代碼
output —— 出口就是webpack打包完成的輸出:
1.單個(gè)entry情況下對應(yīng)的output： module.exports = { entry: './src/index.js', output: { path : path.resolve(_dirname,'dist'), //輸出后存儲(chǔ)的路徑 filename : 'output.bundle.js' // 輸出后文件的名字 } }; 2.多個(gè)entry情況下對應(yīng)的output： module.exports = { entry : { hame : './home.js', about:'./about.js' other:'./other.js' }, output: { path : path.resolve(_dirname,'dist'), filename : '[name].bundle.js' // name會(huì)自動(dòng)替換文件名為入口的屬性名 } } 復(fù)制代碼
三. loader-常用loader：
- Webpack自身只支持加載js和json模塊，而Loader能讓webpack去處理其他類型的文件
- loader需要下載，如果不知道要下什么，可根據(jù)報(bào)錯(cuò)下載所需loader
url-loader - 將文件轉(zhuǎn)換為base64 url的webpack加載程序，通常用于處理圖片：
module.exports = { module: { rules : [{ test : /.(png|jpg|gif)$/i, //要匹配的文件 use : [{ loader : 'url-loader', //使用的規(guī)則 options : { limit:8192 //文件大小限制 } }] }] } }; 復(fù)制代碼
babel-loader - 把高版本的js向后（es5）兼容
module :{ rules:[ //這個(gè)是url-loader { test:/.(png|jpg|gif)$/i, use:[ { loader:'url-loader', options:{ limit:8192 } } ] }, //這個(gè)是babel-loader { test:/.m?js$/, //檢測將要匹配的文件 exclude: /(node_modules|bower_components)/, //要排除的文件 use:{ //使用了什么loader loader : 'babel-loader', options:{ presets:['@babel/preset-env'] //使用什么規(guī)則 } } } ] } 復(fù)制代碼
sass-loader:
module.exports = { module: { rules : [ // sass { test: /.s[ac]ss$/i, use: [ 'style-loader', 'css-loader', 'sass-loader', ], }, ] } }; 復(fù)制代碼
四. Plugin-常用插件：
- Plugin和loader是兩個(gè)比較混淆和模糊的概念。Loader是用來轉(zhuǎn)換和加載特定類型的文件，所以loader的執(zhí)行層面是單個(gè)的源文件。而plugin可以實(shí)現(xiàn)的功能更強(qiáng)大，plugin可以監(jiān)聽webpack處理過程中的關(guān)鍵事件，深度集成進(jìn)webpack的編譯器，可以說plugin的執(zhí)行層面是整個(gè)構(gòu)建過程。Plugin系統(tǒng)是構(gòu)成webpack的主干，webpack自身也基于plugin系統(tǒng)搭建，webpack有豐富的內(nèi)置插件和外部插件，并且允許用戶自定義插件
- 與loader不同的是，使用plugin我們必須先引用該插件
例如:
const webpack = require('webpack'); // 用于引用webpack內(nèi)置插件 const htmlWebpackPlugin = require('html-webpack-plugin'); // 外部插件 module.exports = { plugins: [ new webpack.HotModuleReplacementPlugin(), new HtmlWebpackPlugin({template: './input.html'}) ] }; 復(fù)制代碼
minCssExtract:
plugins:[ new MiniCssExtracPlugin({ filename:'[name].css', //name 為 entry里的名字 不是必須設(shè)置 chunkFilename: '[id].css' //不是必須設(shè)置 }) ] //要使用這個(gè)的時(shí)候，要在sass-loader中的use里在配置一下，將style-loader換成這個(gè)MiniCssExtracPlugin.loader 復(fù)制代碼
DefinePlugin:
- definePlugin允許創(chuàng)建可以配置的全局常量 new webpack.DefinePlugin([ 'service_url' : josn.stringify('http://www.baidu.com') // service_url 為變量，這樣即使改變訪問的地址，也可以通過變量來控制 ]) 復(fù)制代碼
HtmlWebpackPlugin-幫助我們生成html文件
1. 系統(tǒng)默認(rèn)生成的： plugins: [ new HtmlWebpackPlugin() // 這樣就能執(zhí)行了-> 就會(huì)生成index.html文件，并且會(huì)自動(dòng)幫我們引入js和css文件 ] 2. 我們自定義的 new HtmlWebpackPlugin({ title: 'My App', //html的title filename: 'indexa.html' //生成的文件名字 template: 'template.html' //自己的輸入文件的內(nèi)容——在創(chuàng)建一個(gè)template.html文件 //就可以在template.html文件里定義title —— 在title標(biāo)簽里輸入<%= htmlWebpackPlugin.options.title %> //同樣也可在此文件里引用script 或 其他不需要打包的div }) //之后我們indexa.html里，就會(huì)出現(xiàn)template.html文件里定義的東西 復(fù)制代碼
五. DevServer-熱更新：
module.exports = { //... devServer: { contentBase: path.join(__dirname, 'dist'), //在哪個(gè)目錄下啟動(dòng)該插件 ，并且此dist要與上面的output 相一致 compress: true, //是否壓縮 port: 9000 // 啟動(dòng)的端口 // hot: true // 熱替換 不寫也是熱替換 現(xiàn)在寫true有可能報(bào)錯(cuò)，所以還是別寫了吧 } }; 復(fù)制代碼
注：
- 通常我們都會(huì)初始化文件 獲得查看配置文件的文件。
- npm init - y
作者：Honer
鏈接：https://juejin.im/post/5da898376fb9a04dea5df587
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
