webpack使用之基礎篇

時間 2019-12-05

標籤 webpack 使用基礎简体版

原文原文鏈接

說到自動化構建，你想到了什麼？基於AMD的requirejs？仍是基於commoJS的browserify？他們都在各自的領域或者說時代發揮了很重要的做用。
可是時代的變遷，webpack成了如今的佼佼者，咱們不知道何時wepback也會被取代，可是如今咱們必需要掌握。
我不擔憂我學完webpack新東西來了就沒用了，相反的我很期待也很高興有新的東西來取代webpack，由於若是能取代，必然是更好的東西。若是是更好的，那又爲何要拒絕呢？活在當下，認真學習。
css

1、基本簡介

webpack和requirejs browserify同樣，都是一款打包工具，那爲何要選這個？咱們進行一個對比html

1. requirejs

很老的產物了，它興起的時候web模塊化的標準都尚未完善。那個時候出了一款基於AMD的打包工具，
不得不說對前端的發展起到了相當重要的做用，若是它能夠功成身退了。前端

2. browserify

是一個和webpack差很少同時代的產物，可是它只支持基於commonJS，對於AMD來講只能興嘆了。
而且它只支持打包js,若是你對這兩個缺點不那麼在乎，那麼就是它了。java

3. webpack

支持AMD和commonJS,以模塊化爲起點,咱們不只能夠用它打包js，也能夠打包css，
包括圖片。webpack把任何一個文件都當作一個模塊，所以你準備好要迎接模塊化的挑戰了嗎？node

2、環境搭建

1. IDE推薦

IDEA、webstrom、sublime、atom 都是很不錯的編輯工具，idea大而全，webstrom是idea的簡化版、sublime輕量但不失穩重、atom新興但不失典雅，東西不分上下，重在本身喜歡。找一個本身順手的就好，順便一提，我如今主要使用IDEA、輔助atom。由於我是一個java黨啊，少不了IDEA，atom的界面是我最喜歡的。webpack

2. 開始建項目寫配置

a.新建項目 mkdir webpack-study && cd webpack-study
b.初始化環境 npm init -y
c.安裝工具(若是你沒安裝taobao源，把cnpm換成npm) npm install --save-dev webpack webpack-dev-server
說明:webpack是核心文件、wepback-dev-server是類http-server的web啓動工具，建議安裝一下這個server
d.新建配置文件 (名字必定不能換) touch webpack.config.jsgit

配置webpackweb

module. exports ={
  entry:'./index.js',
  output:{
    path:__dirname+'/dist',
    filename:'bundle.js'
  }
}

說明:
模塊化module.export
入口文件:entry 有幾個頁面就有幾個entry 若是是單頁面（spa)，一個entry就夠了
輸出 output,path是輸出路徑,__dirname是nodejs的全局變量，表示當前目錄, filename，打包後的文件名npm

3、寫一個小測試

1. 新建入口文件並寫入文件

vim index.js
document.write('Hello world');json

2. 新建一個css

touch style.css

body{
    background-color:pink;
  }

3.新建一個html

touch index.html
寫下如下內容

<!doctype html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>hello webpack</title>
    <script src="dist/bundle.js"></script>
  </head>
  <body>
  </body>
  </html>

說明:
模塊化module.export
入口文件:entry 有幾個頁面就有幾個entry 若是是單頁面（spa)，一個entry就夠了
輸出 output,path是輸出路徑,__dirname是nodejs的全局變量，表示當前目錄, filename，打包後的文件名

3、寫一個小測試

1. 新建入口文件並寫入文件

vim index.js document.write('Hello world');

2. 新建一個css

touch style.css

body{
    background-color:pink;
  }

3.新建一個html

touch index.html
寫下如下內容

<!doctype html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>hello webpack</title>
    <script src="dist/bundle.js"></script>
  </head>
  <body>
  </body>
  </html>

4.webpack的重頭戲

那就是loaders，wepback的一大特點就是能夠將一些瀏覽器不能原生支持的文件經過loaders編譯成瀏覽器能夠支持的文件
a.安裝loaders
npm install style-loader css-loader
b.打開webpack.config.js
添加模塊

module:{
    loaders:[
    {
      test:/\.css$/,
      loaders:['style-loader','css-loader']
      }
  ]

  }

說明：
模塊下定義大的loaders去loader須要的東西，它是一個數組，意味着它能夠定義多個
一個對象就是一個loader，test用正則匹配文件後綴
loaders指定採用哪一個loader,注意它是從右往左執行，因此這裏先執行css-loader
css-loader處理css的一些url，包括相對的絕對的之類的東西
style-loader 是將css文件採用js動態寫入html頁面
c.使用css
打開index.js (由於咱們這裏沒有用babel,因此就用es5來寫)
require('./style.css');

4、查看效果

咱們如今可使用webpack-dev-server這個東西了
若是你己經全局安裝了(cnpm install -g webpack-dev-server),直接命令webpack-dev-server就能夠開起來了，固然你也能夠在package.json文件裏面添加script，文件以下

{
"name": "webpack-study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start":"webpack-dev-server --progress",
"build":"webpack --progress",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.23.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
  }
}

這裏咱們就可使用npm run build來編譯，使用npm run start來開啓服務器

➜  webpack-study git:(master) ✗ npm run build

> webpack-study@1.0.0 build /Users/xiaomo/workspace/webpack-study
> webpack --progress
Hash: 11ffef2911f2436a3948
Version: webpack 1.13.0
Time: 64ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./index.js 30 bytes {0} [built]
   ➜  webpack-study git:(master) ✗ npm run start

   > webpack-study@1.0.0 start /Users/xiaomo/workspace/webpack-study
   > webpack-dev-server --progcess

   http://localhost:8080/webpack-dev-server/
   webpack result is served from /
   content is served from /Users/xiaomo/workspace/webpack-study
   Hash: 11ffef2911f2436a3948
   Version: webpack 1.13.0
   Time: 80ms
       Asset     Size  Chunks             Chunk Names
   bundle.js  1.42 kB       0  [emitted]  main
   chunk    {0} bundle.js (main) 30 bytes [rendered]
       [0] ./index.js 30 bytes {0} [built]
   webpack: bundle is now VALID.

b.而後訪問 http://locahost:8080 就能夠看到效果了