7. <script>-tag style
if you didn’t use a module system.
<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libraryA.js"></script>
<script src="module3.js"></script>
7
webpack 介紹
8. if you didn’t use a module system.
<script>-tag style
8
webpack 介紹
9. <script>-tag style
Common problems
• Order of loading is important.
• Developers have to resolve dependencies of modules/libraries.
• In big projects the list can get really long and difficult to manage.
9
webpack 介紹
14. • Server-side modules can be reused
• There are already many modules in this style (npm)
• very simple and easy to use.
webpack ⽀支援 CommonJS 的優點
Pros
14
webpack 介紹
27. • Loaders allow you to preprocess files as you require() or “load” them.
27
webpack.config.js
boot.jsx
webpack 範例
28. • Loaders allow you to preprocess files as you require() or “load” them.
篩選對應的檔案格式並進⾏行對應設定
28
webpack 範例
29. 使⽤用exclude參數,排除 node_module 資料夾
Webpack accepts an array of loader objects which specify loaders to apply to files that match the test
regex and exclude files that match the exclude regex.
1. test 參數: 藉由正規表達式找到符合條件的檔案
2. exclude 參數:藉由正規表達式找到不符合條件的檔案
3. loader 參數: 由右到左執⾏行 loader 設定
29
webpack 範例
30. 使⽤用exclude參數,排除 node_module 資料夾
Webpack accepts an array of loader objects which specify loaders to apply to files that match the test
regex and exclude files that match the exclude regex.
1. test 參數: 藉由正規表達式找到符合條件的檔案
2. exclude 參數:藉由正規表達式找到不符合條件的檔案
3. loader 參數: 由右到左執⾏行 loader 設定
30
webpack 範例
31. webpack 範例 - react-hot-loader
React Hot Loader is a plugin for Webpack that allows instantaneous live refresh without losing state while editing React
components.
React Hot Loader 這個套件會幫你瞬間重新整理,不會改變 React 元件的編輯狀態
31
webpack.config.js
32. webpack 範例 - babel-loader
Babel is a compiler for writing next generation JavaScript.
babel-loader 這個套件會轉換 Javascript 語法,從ES6 或 ES7 轉成ES5
32
webpack.config.js