webpack4.0學習記錄

2019/04/28  

1.本質上，webpack基於node  node跟webpack爲最新穩定版，才能更好，更快的打包

安裝

　　1.卸載node  直接在控制面板  卸載  

　　2.安裝 從官網下載 而後自定義安裝在非C盤中 須要配置環境變量 （高級系統配置 -》環境變量 ）

　　 

　　而後保存 就能夠 全局 node -v 查看版本了

 　　(建立一個文件夾 並 遵循 node規範)

　　

　　安裝 webpack   npm install webpack webpack-cli -g  （全局安裝 不推薦 要是安裝不成功 手機分享一個wifi） 

　　查看版本號 webpack -v     

　　全局安裝的缺陷  兩個項目用的不一樣webpack

　　推薦局部安裝 ！

　　　　1.卸載全局安裝的webpack （npm uninstall webpack webpack-cli -g）

　　　　2.當前文件夾下安裝 （npm install webpack webpack-cli -D 等價於 npm install webpack webpack-cli --save-dev ）

　　　　3.局部查看webpack版本 npx webpack -v（它會在當前目錄moudel下面找webpack）

　　　　4.npm info webpack 查看webpack版本信息  另外一個文件夾中安裝另一個版本 例如npm install webpack@4.16.5 webpack-cli -D（npx webpack -v 查看版本）

　　　　5.這就是局部安裝的優勢

　-------------------------------------------華 麗 分 割 線 --------------------------------------------------------------　

 　　2019/04/29

　　webpack index.js (全局命令)

　　npx webpack index.js（局部）  打包指定的js

　　（在沒有配置webpack.config.js 的狀況下 用的是默認的配置 可是必須指定文件名 否則直接 npx webpack報錯 

　　後來看文檔的時候試了一下 你若是按照默認配置放在src/index.js下  也不會報錯 由於這是默認配置）

　　index.js 中

　　

　　其餘js中

　　

　　如何自定義編寫webpack配置文件？

　　1.手動建立 webpack.config.js

　　

　　npx webpack（流程： 執行 -》找webpack.config.js  -》打包入口index.js）

　　 若是 沒有手動建立 webpack.config.js，你將指定其餘文件名進行打包

　　npx webpack --config [name].js 

　　2.如何優化打包命令？

　　　　在package.json -》scripts 配置 

　　　　

　　　　而後 執行 npm run bundel 就至關於 npx webpack

　　3.webpack-cli的做用？

　　　　做用是能在命令中使用webpack npx webpack等

 

　-------------------------------------------華 麗 分 割 線 --------------------------------------------------------------

　2019/05/07

　　

　　打包的一些分析

　　

 

 　　（簡寫 與 非簡寫）

　　

　　（須要配置mode 默認爲production        development 非壓縮 production 壓縮）

　　

　　三聯問~~~

　　webpack是什麼？ 模塊打包工具

　　模塊是什麼？

　　webpack 的配置文件是什麼？

　　

　　loader 是什麼？  它是一個打包非js文件的方案！

　　打包非js的文件都須要用到loader 

　　好比 圖片  而這些loader都是dev開發環境中使用的 因此是-dev 也就是-D的安裝模式

　　（安裝 loader）

　　

　　（開發環境要用到的）

　　

　　配置webpack.config

　　

 

　　js寫法

　　

　　打包以及生成

　　 

　　

　　流程 當webpack打包 -》碰到非 js文件 -》去找webpackconfig下moudle找相對用的loader解決方案-》將文件打包到靜態輸出文件中-》再將返回值 返回給當前的js

 　　-------------------------------------------華 麗 分 割 線 --------------------------------------------------------------

 　　2019/05/08

　　

　　各類loader

　　

　　　　圖片loader

　　　　file-loader打包圖片的一些設置

　　　　（打包出來的文件名稱配置）

　　　　

　　　　url-loader 相似 file-loader

　　　　不一樣點 將圖片打包成base64  配置limit屬性 前提是基於file-loader

　　　　

　　　　官網須要看的loader章節

　　　　樣式loader

　　　　（webpack 不識別這種引入方式）

 　　　　  

　　　　

　　　　

　　　　scss 處理方案

　　　　

 

　　　　官網安裝sass

　　　　npm i sass-loader node-sass webpack --save-dev （use數組中的執行順序是從下到上 從右到左）

　　　　

 

　　　　css3 廠商前綴配置 方案（postcss-loader）

　　　　npm i -D postcss-loader

　　　　

　　　　新建 postcss.config.js 配置文件 配置  autoprefixer

　　　　npm install autoprefixer -D

　　　　

 

　　　　

　　-------------------------------------------華 麗 分 割 線 --------------------------------------------------------------

 　  2019/05/13

　　

　　scss解析

　　

　　那麼在 scss中 @import '.avator.scss' 引入其餘的scss 會發生什麼？

　　會報錯（試了一下 沒報錯）

　　作以下改動 

　　下面爲啥作這種改動 

　　

　　視頻上說這樣 不會報錯 什麼的

　　關於 css modules 模塊化

　　

 　　引入打印爲惟一標示class   不配置的話 打印爲空無任何意義

　　

　　

　　css解析字體文件  

　　

　　

 

 　　-------------------------------------------華 麗 分 割 線 --------------------------------------------------------------

　　3-5