標籤：

webpack到底怎麼用?

02-08

誰能教教我webpack到底怎麼用，網上說的神乎其神，我還是看不懂，不知道怎麼入手，能給個demo嗎

入門Webpack，看這篇就夠了

正好想把自己關於這大半年使用webpack，和編寫webpackPlugin的一些心得總結分享出來

，就把另一個答案直接貼過來了。

webpack編譯流程漫談 · Issue #1 · slashhuang/blog · GitHub

webpack 3 零基礎入門教程 #1 - 介紹

webpack 3 零基礎入門教程 #2 - 安裝

webpack 3 零基礎入門教程 #3 - 實現 hello world

webpack 3 零基礎入門教程 #4 - webpack 的配置文件 webpack.config.js

webpack 3 零基礎入門教程 #5 - 使用第一個 webpack 插件 html-webpack-plugin

webpack 3 零基礎入門教程 #6 - 使用 loader 處理 CSS 和 Sass

webpack 3 零基礎入門教程 #7 - 初識 webpack-dev-server

webpack 3 零基礎入門教程 #8 - 用 webpack 和 babel 建立 react 開發環境

webpack 3 零基礎入門教程 #9 - 用 clean-webpack-plugin 來清除文件

webpack 3 零基礎入門教程 #10 - 配置多個 HTML 文件

webpack 3 零基礎入門教程 #11 - 如何使用 pug (jade) 作為 HTML 的模板

webpack 3 零基礎入門教程 #12 - 如何使用模塊熱替換 HMR 來處理 CSS

webpack 3 零基礎入門教程 #13 - 生產環境 vs 開發環境

webpack 3 零基礎入門教程 #14 - 如何打包圖片

webpack 3 零基礎入門教程 #15 - 載入和打包 Twitter Bootstrap 框架

webpack 3 零基礎入門教程 #16 - 使用 ProvidePlugin 插件來處理像 jQuery 這樣的第三方包

webpack 3 零基礎入門教程 #17 - 輕鬆通過兩個實例來理解 devtool: source-map 是什麼意思

webpack 3 零基礎入門教程 #18 - 構建開發和生產環境-分離配置文件

文章已更新完畢

配套視頻正在更新中。。。

視頻：

webpack 3 零基礎入門視頻教程

正在準備這套教程所有的文章的配套視頻，敬請期待

一個簡易webpack教程。https://github.com/wangning0/Autumn_Ning_Blog/blob/master/blogs/3-12/webpack.md

http://mlxiao.com/2017/02/08/webpack/

（鏈接已經更新）本人寫的一篇超詳細的webpack配置教程，不講概念只寫配置，基於webpack2。

一小時包教會 —— webpack 入門指南，這個webpack教程不錯。

官方文檔是最好的老師：webpack 國內開發者灰常給力，已經有中文官網了。

這個Github倉庫搜羅各種有關Webpack的技術文章和工具 ： webpack-china/awesome-webpack-cn

--------------------------

自己也寫過有關webpack的教程：Webpack第一課 -- 初識Webpack

github地址在：maoxiaoke/You-know-what-is-webpack

除了閱讀一下官方說明+其它文章，建議，找一個前端開發或構建過程中的問題，嘗試去動手寫一個 loader 、寫一個 plugin 試試，去解決對應問題，寫的過程中自然就會去查閱文檔、想辦法了解它，也就熟悉了它。

如果不想了解這麼多，就想簡單的使用，也可以試試，我們剛開源的 Dawn alibaba/dawn ，以「中間件」形式封裝常用功能，並能以 pipeline 去組織構建任務。

針對一個基於 Webapck + React 的前端工程，通常僅需如下少量配置:

# 啟動開發服務
dev:
- name: webpack
entry: ./src/*.js
template: ./assets/*.html
watch: true
- name: server
port: 8001
- name: browser-sync

# 直接構建
buid:
- name: webpack
entry: ./src/*.js
template: ./assets/*.html

在工程根目錄，添加一個 .dawn/pipe.yml 文件，加入如上配置。

然後就可以，執行如下命令

dn dev

上邊的命令會啟動 webpack 實時編譯和 DevServer 及瀏覽器自動刷新，可以愉快的 Coding 了。

打包 prod 版本時，需要如下命令

dn build

當然，需要先安裝好 Dawn

npm i dawn -g

安裝好後，還可以快速初始化一個基礎的 React 工程，如下

dn init -t react

或者在「推薦模板」中選擇

dn init

將會列出模板，選擇想初始化的項目類型即可。

僅供參考

看這裡啊，優酷、B 站都可以看，最棒的視頻教程 Webpack 2 視頻教程 - DevOpenClub

  • #001 - Webpack 簡介
  • #002 - NodeJS 安裝與配置
  • #003 - Webpack 項目初始化
  • #004 - Webpack 初體驗
  • #005 - Webpack 編譯輸出日誌
  • #006 - 使用快捷方式進行編譯
  • #007 - 配置 WDS 進行瀏覽器自動刷新
  • #008 - WDS 埠號等配置相關
  • #009 - 配置 ESLint 實現代碼規範自動測試 (上)
  • #010 - 配置 ESLint 實現代碼規範自動測試 (下)
  • #011 - Webpack2 中載入 CSS 的相關配置與實戰
  • #012 - 理解 Webpack 中的 CSS 作用域與 CSS Modules
  • #013 - 自動分離 CSS 到獨立文件
  • #014 - 深入理解 Webpack 2 中的 loader
  • #015 - Webpack 2 中的文件壓縮
  • #016 - Webpack 2 中生成 SourceMaps
  • #017 - Webpack 2 中分離打包項目代碼與組件代碼
  • #018 - 使用可視化圖表進行統計分析打包過程
  • #019 - Webpack 2 中配置多頁面編譯
  • #020 - Webpack 2 中的 HMR ( Hot Module Replacement )

webpack資源總匯：GitHub - lengziyu/learn-webpack: 記錄學習的webpack

一個很簡單的教程，有什麼寫的不詳細的可以給我留言~ webpack--初窺（一）

難道這不是前端界的釣魚貼？

Webpack飛行手冊你值得擁有！

可以看下我翻譯的：webpack2的入門手冊，英文好的話可以直接看原文：A Beginner』s Guide to Webpack 2 and Module Bundling

看這裡 webpack 入門指南

知乎專欄 不說了 就這個 剛看挺好的 哈哈

分頁阅读： 1 2