webpack 4 第1課 概念 1 模塊化工具 構(gòu)建工具 打包工具 2 webpack把所有的東西打包成js文件，壓縮圖片，把sass生成css, 3 熱加載 4 自己有服務(wù)器 第2課 安裝 1 先安裝NodeJS? ? node --version 2 換成淘寶鏡像 npm install -g cnpm --registry=https://registry.npm.taobao.org 3 npm install -g webpack 4 或 npm install --save-dev webpack 第3課 實(shí)現(xiàn)Hello World 1 npm init 2 建好文件夾 src/app.js dist 3 裝命令行包 npm install webpack-cli -g 4 正式開始 注意要設(shè)置環(huán)境類型 webpack src/app.js -o dist/bundle.js --mode development 如果寫--mode production 則打出來的會(huì)是壓縮版（就一行） 3.1 - 監(jiān)控 加上實(shí)時(shí)監(jiān)控 webpack src/app.js -o dist/bundle.js --mode development --watch 3.2 - 安裝本地服務(wù)器 npm install -D webpack-dev-server 3.3? “__dirname”是node.js中的一個(gè)全局變量，它指向當(dāng)前執(zhí)行腳本所在的目錄 3.4 配置文件 webpack.config.js 2019-01-14 繼續(xù)學(xué) scss less 預(yù)處理器 1 可用命令來執(zhí)行webpack，但通過配置文件來使用webpack更好 2 ?使用webpack構(gòu)建本地服務(wù)器 ?npm install --save-dev webpack-dev-server 3 devServer 是本地服務(wù)器的配置 4 loaders 可以把 scss 轉(zhuǎn)換為 css，可把React中的jsx轉(zhuǎn)換成js

babel核心功能位于哪個(gè)包里	babel-core
babel里解析es6的包	babel-env-preset
bable里解析jsx的包	babel-preset-react
css-loader	可使用類似 @import 和 url(...) 的方法實(shí)現(xiàn)require()的功能
style-loader	將所有計(jì)算后的樣式加入頁面
通過合適的配置webpack也可以把css打包為單獨(dú)的文件
CSS modules	通過CSS模塊，所有的類名，動(dòng)畫名默認(rèn)都只作用于當(dāng)前模塊
css預(yù)處理器有哪些	sass less
在webpack里使用相關(guān)的loaders進(jìn)行配置，就可以使用css預(yù)處理器	Less Loader Sass Loader Styls Loader
PostCSS是干什么的	為CSS代碼添加適應(yīng)不同瀏覽器的CSS前綴
安裝PostCSS	npm install --save-dev postcss-loader autoprefixer
Plugins
Webpack 里的 Loader 是干什么的	打包構(gòu)建過程中來處理源文件的 jsx scss less 一次處理一個(gè)
webpack的插件 Plugins 有什么功能	它直接對(duì)整個(gè)構(gòu)建過程起作用
HtmlWebpackPlugin

轉(zhuǎn)載于:https://www.cnblogs.com/jason-beijing/p/10327419.html

總結(jié)

以上是生活随笔為你收集整理的Webpack - 自学笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。