webpack官網(wǎng)到底是哪個(gè)慎璧？侨核？次洼？
https://webpack.docschina.org/
https://www.webpackjs.com/
webpack：從入門到真實(shí)項(xiàng)目配置
git地址
工程化是什么鬼?
一敢伸、自動(dòng)化
什么是自動(dòng)化？
優(yōu)化resume項(xiàng)目
1. sass和scss（優(yōu)化css）
- 安裝node sass(用來(lái)優(yōu)化css)
https://github.com/sass/node-sass
//全局安裝node-sass
npm install node-sass -g
//用node-sass把scss轉(zhuǎn)成css格式
node-sass main.scss main.css
如果安裝失敗就去google "node sass 安裝失敗"
sass和scss的區(qū)別喳魏？棉浸？？
這個(gè)是ruby社區(qū)的人發(fā)明的截酷，一開(kāi)始發(fā)明的是sass涮拗，語(yǔ)法很簡(jiǎn)潔（沒(méi)有{}），前端說(shuō)看不懂迂苛，然后ruby社區(qū)就再發(fā)明了scss給前端用(有{})三热，sass自己用。
- scss可以識(shí)別css的語(yǔ)法三幻，把.css文件改成.scss文件不會(huì)報(bào)錯(cuò)
- scss可以使用一些css不支持的語(yǔ)法（如層級(jí)嵌套）就漾，scss文件需要使用工具轉(zhuǎn)化成css文件瀏覽器才能識(shí)別
- 安裝node-sass，用命令行
node-sass main.scss main.css可以手動(dòng)把scss文件轉(zhuǎn)成css文件
這樣我們就可以寫scss文件啦念搬，但是瀏覽器不能識(shí)別scss文件抑堡，需要把scss轉(zhuǎn)換成css才可以
但每次改動(dòng)一下scss文件，都要用命令行轉(zhuǎn)換成css才能生效朗徊，這樣太不方便了首妖，能不能自動(dòng)轉(zhuǎn)換呢？爷恳？
——可以有缆，使用命令node-sass main.scss main.css -w
改了main.scss后保存，main.css也會(huì)跟著改變温亲，頁(yè)面就會(huì)生效
2. babel（優(yōu)化js）
ES6的語(yǔ)法如let在Chrome上可以用棚壁，但一些舊版本的IE上會(huì)報(bào)錯(cuò)。怎么辦呢栈虚？有沒(méi)有什么工具可以幫忙將ES6等新代碼轉(zhuǎn)成ie也可以識(shí)別的代碼呢袖外？
——babel
https://babeljs.io/setup#installation
安裝babel(看最新版的文檔，現(xiàn)在的版本和之前不一樣了魂务，安裝方法也有區(qū)別)
Babel 可以讓你使用 ES2015/16/17 寫代碼而不用顧忌瀏覽器的問(wèn)題曼验，Babel 可以幫你轉(zhuǎn)換代碼。首先安裝必要的幾個(gè) Babel 庫(kù)
npm i --save-dev babel-loader babel-core babel-preset-env
先介紹下我們安裝的三個(gè)庫(kù)：
babel-loader 用于讓 webpack 知道如何運(yùn)行 babel
babel-core 可以看做編譯器粘姜，這個(gè)庫(kù)知道如何解析代碼
babel-preset-env 這個(gè)庫(kù)可以根據(jù)環(huán)境的不同轉(zhuǎn)換代碼
（引用自https://zhuanlan.zhihu.com/p/30701816）
全局安裝和項(xiàng)目安裝有什么區(qū)別鬓照？
- 現(xiàn)在babel遇到了和寫sass一樣的問(wèn)題因苹，修改了js文件后需要用命令行手動(dòng)轉(zhuǎn)，能不能自動(dòng)轉(zhuǎn)呢卷哩？
現(xiàn)在就需要開(kāi)兩個(gè)命令行窗口港华，一個(gè)監(jiān)聽(tīng)scss文件改動(dòng)然后自動(dòng)轉(zhuǎn)換，一個(gè)監(jiān)聽(tīng)js文件改動(dòng)然后自動(dòng)轉(zhuǎn)換
-
代碼目錄結(jié)構(gòu)比較亂
目錄結(jié)構(gòu)混亂 - 那么有沒(méi)有什么比較規(guī)范的目錄結(jié)構(gòu)呢掉缺？
- 將css,js七嫌，html董虱，img等都挪到src目錄中
改成新的目錄結(jié)構(gòu)后咙轩，頁(yè)面混亂了获讳，那些js,css引用都會(huì)有點(diǎn)問(wèn)題，怎么辦呢活喊？
之前的那些監(jiān)聽(tīng)需要重新寫input和output
- 使用node-sass監(jiān)聽(tīng)css目錄下的scss文件變化并翻譯成css文件（-o目錄 -w監(jiān)聽(tīng)）輸出
- 使用babel翻譯js文件
3. 自動(dòng)監(jiān)聽(tīng)html文件和img的變化并copy
現(xiàn)在有個(gè)問(wèn)題丐膝，dist目錄下只有css和js，沒(méi)有html
那么有沒(méi)有命令可以監(jiān)聽(tīng)html改動(dòng)并自動(dòng)copy到dist目錄下呢
——watch命令 https://github.com/doowb/watch-cli
- 還要再開(kāi)窗口
- 監(jiān)聽(tīng)index.html文件變化了就把index.html從src目錄拷貝到dist目錄
- 監(jiān)聽(tīng)img目錄圖片變化了就把img目錄下的圖片從src目錄拷貝到dist目錄
使用watch命令：監(jiān)聽(tīng)到src/index.html文件改變了,就執(zhí)行后面的命令cp src/index.html dist/index.html(把src目錄下的index.html復(fù)制到dist目錄下)
（使用resume-15-5改成resume-15-9钾菊，自己改下試試）ＫТ！！煞烫！
git remote set-url origin git@xxxxxxx再加個(gè)需求浑此，每次改動(dòng)css或js文件給引用的地方自動(dòng)更新下版本號(hào)，解決緩存更新相關(guān)的問(wèn)題
現(xiàn)在這樣滞详，每次寫代碼的時(shí)候都要開(kāi)好多個(gè)命令行窗口凛俱，不夠智能，能不能不用這么多呢料饥？5個(gè)窗口一個(gè)命令完成蒲犬，什么工具呢？
Grunt(過(guò)時(shí)了不用了)
Gulp(過(guò)時(shí)了不用了)
webpack
二岸啡、用webpack來(lái)代替這些命令行
1. webpack安裝配置
https://github.com/webpack/webpack
安裝webpack:
npm install --save-dev webpack
Get Started
https://webpack.docschina.org/guides/getting-started
找到配置Configuration相關(guān)的
//webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
新增并編輯webpack.config.js后，在命令行運(yùn)行npx webpack
可以這樣說(shuō)凰狞，執(zhí)行
npx webpack篇裁，會(huì)將我們的腳本src/index.js作為 入口起點(diǎn)，也會(huì)生成dist/bundle.js作為 輸出赡若。Node 8.2/npm 5.2.0 以上版本提供的npx命令达布，可以運(yùn)行在開(kāi)始安裝的 webpack package 中的 webpack 二進(jìn)制文件（即./node_modules/.bin/webpack）
npx webpack幫你去找本地目錄的webpack
2. webpack babel安裝配置
google搜webpack babel github（webpack如何配置babel）
https://github.com/babel/babel-loader
- 安裝：
npm install -D babel-loader @babel/core @babel/preset-env webpack
npm install -D：-D, --save-dev: Package will appear in your devDependencies. - 配置webpack配置文件（webpack.config.js）
//webpack.config.js
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
- 安裝好并修改好webpack配置文件后，再在命令行輸入
npx webpack就可以啦
image.png
- 在src/js/目錄下創(chuàng)建3個(gè)文件（moudle-1.js逾冬、moudle-2.js黍聂、app.js）
//moudle-1.js
function fn(){console.log(1)}
export default fn
//moudle-2.js
function fn(){console.log(2)}
export default fn
//app.js
import x from './moudle-1.js'
import y from './moudle-2.js'
x()
console.log('webpack test')
y()
- 修改下webpack配置文件↓
- 重新webpack一下，三個(gè)js都輸出到一個(gè)bundle.js里面↓
3. webpack scss安裝配置
在src/css路徑下新建個(gè)main.scss产还，用webpack怎么把這個(gè)scss文件轉(zhuǎn)成css文件呢？
-
搜webpack scss
image.png
(css)sass-loader (js)babel-loader
https://github.com/babel/babel-loader
https://github.com/webpack-contrib/sass-loader
https://webpack.docschina.org/loaders/sass-loader/
3.1 安裝
npm install sass-loader node-sass webpack --save-dev
通過(guò)將 style-loader 和 css-loader 與 sass-loader 鏈?zhǔn)秸{(diào)用嘀趟，可以立刻將樣式作用在 DOM 元素
npm install style-loader css-loader --save-dev
3.2 修改webpack配置文件
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [
"style-loader", // 將 JS 字符串生成為 style 節(jié)點(diǎn)
"css-loader", // 將 CSS 轉(zhuǎn)化成 CommonJS 模塊
"sass-loader" // 將 Sass 編譯成 CSS脐区，默認(rèn)使用 Node Sass
]
}]
}
};
這時(shí)候運(yùn)行npx webpack打包文件,發(fā)現(xiàn)沒(méi)有加載css
3.3 在入口文件app.js中import css
//app.js
import x from './moudle1.js';
import y from './moudle2.js';
import '../css/main.scss'//引入css文件
再次npx webpack
//css文件：src/css/main.scss
body{
background: pink;
p{
color:purple
}
}
webpack幫你把css變成字符串，存儲(chǔ)在bundle.js中她按，當(dāng)頁(yè)面運(yùn)行的時(shí)候添加到頁(yè)面的style標(biāo)簽中牛隅，等js執(zhí)行了才加載css
use: [
"style-loader", // 將 JS 字符串生成為 style 節(jié)點(diǎn)
"css-loader", // 將 CSS 轉(zhuǎn)化成 CommonJS 模塊
"sass-loader" // 將 Sass 編譯成 CSS炕柔，默認(rèn)使用 Node Sass
]
從下到上：
- step1:sass-loader將sass/scss文件轉(zhuǎn)化成css
- step2:css-loader將 CSS 轉(zhuǎn)化成 CommonJS 模塊
- step3:style-loader將 JS 字符串生成為 style 節(jié)點(diǎn)
現(xiàn)在我們可以把scss轉(zhuǎn)成css了，并且添加到頁(yè)面的style標(biāo)簽中
4. webpack一些其他的配置（如autoprefixer）
再加一些配置
比如說(shuō)display:flex是有兼容性問(wèn)題的媒佣，https://caniuse.com
怎么解決這些css在不同瀏覽器的兼容性問(wèn)題呢匕累？
- 一種方法是coding時(shí)手動(dòng)加前綴（IE加前綴）
- 用工具自動(dòng)幫你加-autoprefixer
在線autoprefixer css
在線autoprefixer css
那么我們想把a(bǔ)utoprefixer加到webpack的配置中，怎么加呢默伍？
google搜webpack autoprefixer
https://github.com/postcss/autoprefixer#webpack
不用autoprefixer-loader而是用postcss-loader；逗佟！也糊！
https://github.com/postcss/postcss-loader
4.1 安裝
npm i -D postcss-loader
4.2 配置
新增postcss配置文件：postcss.config.js
//postcss.config.js
module.exports = {
parser: 'sugarss',
plugins: {
'postcss-import': {},
'postcss-preset-env': {},
'cssnano': {}
}
}
修改webpack配置文件
//webpack.config.js
module.exports = {
module: {
//...
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'postcss-loader' ]
}
]
}
}
安裝配置好了后運(yùn)行npx webpack炼蹦，報(bào)錯(cuò)Error: Loading PostCSS Plugin failed: Cannot find module 'postcss-import'
找不到postcss-import就安裝它：
npm i -D postcss-import同樣的，也安裝其他的postcss的插件（Plugin）和parser
npm i -D postcss-preset-envnpm i -D cssnanonpm i -D sugarss
parcel
https://zh.parceljs.org/
按照快速開(kāi)始照著做一遍显设，就可以了
課后習(xí)題
使用 webpack
用 babel-loader 把 ES6 轉(zhuǎn)譯為 ES5
用 sass-loader 把 SCSS 轉(zhuǎn)譯為 CSS
