sass 和 less 都是css的拓展語言，less和sass最主要的區(qū)別是less是通過Javascript編譯，而sass是通過ruby編譯的，如果沒有引入前端工程化乍桂，less會(huì)消耗客戶端性能，sass會(huì)消耗服務(wù)端性能效床，但是引入前端工程化的話睹酌，gunt，gulp剩檀，webpack等憋沿，less和sass在打包階段都會(huì)轉(zhuǎn)化成css，所以不會(huì)有區(qū)別沪猴，只是sass是基于ruby辐啄，所以每次npm的時(shí)候相對(duì)慢一點(diǎn)點(diǎn)

https://www.webpackjs.com/concepts/

webpack配置

0、搭建項(xiàng)目結(jié)構(gòu)

項(xiàng)目結(jié)構(gòu)

--src：代碼開發(fā)目錄运嗜，

--build：開發(fā)環(huán)境webpack編譯打包輸出目錄壶辜，同樣按照view、styles担租、js組織

--dist：生產(chǎn)環(huán)境webpack編譯打包輸出目錄砸民，同樣按照view、styles奋救、js組織

--node_modules：所有使用的nodeJs模塊

--package.json: 項(xiàng)目配置

--webpack.config.js: 開發(fā)環(huán)境webpack配置

--webpack.production.config.js: 生產(chǎn)環(huán)境webpack配置

20200716-基本的打包方式

步驟1岭参、初始化項(xiàng)目

npm init

執(zhí)行npm init，輸入一個(gè)名字尝艘，其他全部默認(rèn)回車演侯，就會(huì)在當(dāng)前目錄下生成一個(gè)package.json文件

npm init

步驟2、全局安裝webpack 和 webpack-cli

npm i webpack webpack-cli -g

npm i webpack webpack-cli -g

步驟3背亥、本地安裝webpack 和 webpack-cli秒际，-D會(huì)把webpack添加到 package.json中的開發(fā)依賴，webpack下載的所有東西都屬于開發(fā)依賴

npm i webpack webpack-cli -D

npm i webpack webpack-cli -D

步驟4隘梨、執(zhí)行打包命令

webpack ./src/index.js -o ./build/built.js --mode=development

執(zhí)行打包命令報(bào)錯(cuò),Restricted 策略不允許任何腳本運(yùn)行程癌。如果沒有報(bào)錯(cuò)舷嗡，跳過下面的兩句命令轴猎。

執(zhí)行打包命令報(bào)錯(cuò)

查看報(bào)錯(cuò)原因，將計(jì)算機(jī)上的執(zhí)行策略更改為 RemoteSigned进萄，允許腳本運(yùn)行捻脖。

將計(jì)算機(jī)上的執(zhí)行策略更改為 RemoteSigned

set-executionpolicy remotesigned

set-executionpolicy remotesigned

解決上述問題再重新打包锐峭，就成功了。

webpack ./src/index.js -o ./build/built.js --mode=development

開發(fā)環(huán)境打包出來的 built.js文件

步驟5可婶、生產(chǎn)環(huán)境打包

webpack ./src/index.js -o ./build/built.js --mode=production

webpack ./src/index.js -o ./build/built.js --mode=production

打包出來的文件都?jí)嚎s了

生產(chǎn)環(huán)境打包出來的 built.js文件

安裝loader

安裝css文件需要的loader

npm i css-loader style-loader -D

安裝完成后沿癞，就會(huì)在package.json里出現(xiàn)。

npm i css-loader style-loader -D

然后就可以在webpack.config.js中使用矛渴。

在webpack.config.js中使用

安裝less文件需要的loader

npm i less-loader -D

.less文件比.css多一個(gè)less-loader椎扬。

在webpack.config.js配置less-loader

在樣式中引入圖片資源，需要安裝url-loader具温、file-loader

安裝url-loader前通過webpack打包圖片資源蚕涤，會(huì)報(bào)錯(cuò)

安裝url-loader前通過webpack打包圖片資源，報(bào)錯(cuò)

因?yàn)閡rl-loader依賴file-loader铣猩，所以下載兩個(gè)包

npm i url-loader file-loader -D

上面安裝好url-loader揖铜、file-loader后，在webpack.config.js進(jìn)行配置达皿，然后跑webpack命令天吓，就會(huì)看到./build文件夾里面生成了兩個(gè)圖片，還有一漲18kb以下的圖片峦椰，被base64處理龄寞。

webpack.config.js配置

18kb以上，被處理后名字為哈希值的圖片

18kb以下的圖片被base64處理

18kb以下的圖片被base64處理

在樣式中引入圖片資源汤功，要安裝并配置url-loader萄焦，進(jìn)行打包

在html中通過<img/>引入圖片資源，需要安裝html-loader

npm i html-loader -D

npm i html-loader -D

html中使用<img/>標(biāo)簽引入圖片資源

html中使用<img/>標(biāo)簽引入圖片資源

webpack.config.js配置

webpack.config.js配置html-loader冤竹，和關(guān)閉url-loader的es6模塊化拂封，使用commonjs解析

webpack打包后，./build/index.html中成功引入圖片資源

./build/index.html中成功引入圖片資源

修改打包后的圖片名稱

修改打包后的圖片名稱

安裝plugins

安裝html文件需要的plugin

npm i html-webpack-plugin -D

安裝html-webpack-plugin

html-webpack-plugin安裝成功后會(huì)出現(xiàn)在package.json里

html-webpack-plugin安裝成功

使用html-webpack-plugin

在webpack.config.js中配置使用

webpack打包鹦蠕，build文件夾中多了一個(gè)index.html文件冒签。

webpack打包

在./build/index.html文件中，引入了built.js钟病，但是./src/index.html文件并沒有引入萧恕。

./build/index.html

./src/index.html

./src/index.js

需要有結(jié)構(gòu)的HTML文件

webpack.config.js配置寫法改一下

重新webpack打包，html里面的結(jié)構(gòu)就出來了

./build/index.html文件

devServer：用來自動(dòng)化（自動(dòng)編譯肠阱，自動(dòng)打開瀏覽器票唆，自動(dòng)刷新瀏覽器~~）

使用前先安裝

npm i webpack-dev-server -D

npm i webpack-dev-server -D

在webpack.config.js中配置devServer

webpack.config.js中配置

因?yàn)槭窃诒镜匕惭b的webpack-dev-server，所以跑命令npx webpack-dev-server

npx webpack-dev-server

npx webpack-dev-server

一直監(jiān)聽是否有變動(dòng)