webpack 4 第1課 概念 1 模塊化工具 構建工具 打包工具 2 webpack把所有的東西打包成js文件，壓縮圖片，把sass生成css, 3 熱加載 4 自己有服務器 第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課 實現Hello World 1 npm init 2 建好文件夾 src/app.js dist 3 裝命令行包 npm install webpack-cli -g 4 正式開始 注意要設置環境類型 webpack src/app.js -o dist/bundle.js --mode development 如果寫--mode production 則打出來的會是壓縮版（就一行） 3.1 - 監控 加上實時監控 webpack src/app.js -o dist/bundle.js --mode development --watch 3.2 - 安裝本地服務器 npm install -D webpack-dev-server 3.3? “__dirname”是node.js中的一個全局變量，它指向當前執行腳本所在的目錄 3.4 配置文件 webpack.config.js 2019-01-14 繼續學 scss less 預處理器 1 可用命令來執行webpack，但通過配置文件來使用webpack更好 2 ?使用webpack構建本地服務器 ?npm install --save-dev webpack-dev-server 3 devServer 是本地服務器的配置 4 loaders 可以把 scss 轉換為 css，可把React中的jsx轉換成js

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

轉載于:https://www.cnblogs.com/jason-beijing/p/10327419.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。