前端工程化——Webpack入門使用

時間 2019-11-06

標籤前端工程 webpack 入門使用简体版

原文原文鏈接

前言

webpack 是什麼？來自一位小白的疑問。css

是構建工具，仍是打包工具？html

webpack是一個模塊加載器兼打包工具，它可以讓你很是清晰的把編寫模塊化的代碼，什麼編譯都交給webpack就行了，當它也能實現簡單的打包，好比合並js，壓縮等。webpack

下面咱們簡單說下webpack和gulp的區別，好加深下webpack的理解。git

本質上來講，gulp是經過一系列的插件實現了本來複雜繁瑣的任務自動化，好比拷貝啊，替換文件啥的，是一個純粹的工具。它並不能將你的css，圖片等非js資源模塊化。可是webpack能夠作到將非js資源模塊化，好比圖片等。github

總的來講，gulp是一個自動化任務的工具，因此在項目的開發中，你也能夠採用 gulp + webpack 組合大招更好的提高項目效率。web

Webpack的入門使用

說那麼多概念還不如寫個小demo來的實在，相比各位看官也是這麼想得。npm

其實，咱們記住webpack的核心功能是將靜態資源模塊化，js，css，圖片啊等等，都能經過require的方式進行加載。固然你也能夠利用ES6語法improt來引入，這個後面說。json

下面咱們開始進行我們的項目吧。gulp

1.首先建立一個空目錄，執行命令進行初始化windows

> npm init

這樣，我們就有package.json了，下面咱們先把文件目錄搭建一下哈。

目錄結構以下：

好。文件咱們建完了，該幹活寫代碼了。

第一個是 index.html 首頁，這裏咱們的很簡單外部只是引入了一個 bundle.js，相信你們如今也找不到這個bundle.js，由於這個文件是後面webpack編譯打包生成的。他會將style.css，index.js打包成一個js，這樣能加快瀏覽器的加載效率。

//index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo1</title>
    </head>
    <body>
        <div>Hello,world</div>
        <img src="./demo.png" alt="">
        <script src="../dist/bundle.js"></script>
    </body>
    </html>

再看看 style.css，很簡單，就一句話。

// style.css

body{
    background:red;
}

再下一下步，咱們看看 index.js，它也很簡單，並且它的目的是webpack的入口文件，webpack打包就是經過入口文件將裏面require的資源一個個加載編譯打包。你能夠把index.js當作一個嚮導，指引着webpack去尋找那些須要被解救編譯打包的文件。

//index.js

require('./style.css');

The Next,咱們看看編寫 webpack.config.js ，特別聲明，這個文件是webpack的默認配置，通常你沒啥需求也別改它的名字了，可是你要修改的話，本身百度去吧。

修改webpack配置文件命令以下：

> webpack --config XXX.js

具體webpack.config.js配置以下：

// webpack.config.js

var path = require('path')
var webpack = require('webpack');

module.exports = {
  entry: ['./src/index'],  // 指定編譯打包入口文件
  output: {   // 編譯完了，輸出到這個目錄，這個文件名
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [  // 這個是插件配置噢
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false,
      },
    })
  ],
  module: {  // 這個是引入的模塊，能夠用來作一些其餘的事兒
    loaders: [{  //好比這個loaders模塊，能夠給每種類型文件指定加載器
      test: /\.css$/,
      loaders: ['style', 'css']
    },
    ]
  }
}

好了，到如今咱們的業務代碼都寫完了，該安裝所需的插件了。

這裏一下安裝了多個插件，可能會比較慢，能夠先換成國內的淘寶npm鏡像:

> npm --registry https://registry.npm.taobao.org info underscore

安裝插件命令以下：

> npm install style-loader css-loader webpack --save

--save 是將依賴寫入到package.json裏，後面代碼給其餘人用，直接npm install就能自動安裝全部的依賴了。

安裝完成後，我們開始打包！！！

在項目目錄執行如下命令：別傻乎乎的把 > 也拷貝進去啊，就是隻有一個 webpack！！！

> webpack

執行完上面的webpack命令，會出現如下使人欣喜的畫面，啥？沒出現？本身上去找找看看哪裏步驟漏了。
這裏順便推薦一個好用的windows下面的命令行工具： cmder

而後你再打開你項目目錄的 index.html ，直接雙擊用瀏覽器打開噢。

就能看的以下畫面。相信你的require('./style.css')也就生效了。

寫在最後

一個入門級的使用就到這兒了，webpack還有不少黑魔法，本文也只是一個入門使用，後續的我用完再繼續跟你們分享一下，對了，還請大神看到有誤的地方多多指點哈，提點提點小弟。

若是對你有點點幫助，嘿嘿，回覆一下點個贊就是我最大的動力，感激涕零。

參考文獻

http://www.cnblogs.com/pqjwyn...
https://github.com/wangning0/...學習之路

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。