webpack入門記錄

時間 2019-11-18

標籤 webpack 入門記錄简体版

原文原文鏈接

webpack是當下最熱門的前端資源模塊化打包工具，經過 loader 方式，號稱任何資源均可以打包。它在編譯的時候就直接將模塊整理打包、壓縮，而不像sea.js和require.js須要在頁面中引用額外的文件管理，固然，各有不一樣。javascript

安裝

若是你尚未安裝node.js的話，首先安裝 node.js；
使用npm安裝webpack，或者使用cnpm速度更快。css

npm install webpack -g

使用 -g 將webpack安裝到全局環境下，安裝完運行 webpack -h 命令試試。html

通常會將webpack安裝項目依賴中，這樣就可使用項目本地的webpack，聽說效率會高一點；
先使用npm init建立建立package.json文件。前端

Package.json 屬性說明
- name   包名。
- version  包的版本號。
- description  包的描述。
- homepage  包的官網 url 。
- author  包的做者姓名。
- contributors  包的其餘貢獻者姓名。
- dependencies  依賴包列表。若是依賴包沒有安裝，npm 會自動將依賴包安裝在 node_module 目錄下。
- repository  包代碼存放的地方的類型，能夠是 git 或 svn，git 可在 Github 上。
- main  一個模塊ID，它是一個指向你程序的主要項目。就是說，若是你包的名字叫 express，而後用戶安裝它，而後require("express")。
- keywords - 關鍵字

將webpack寫入項目依賴中：java

cnpm install webpack --save-dev

若是須要使用 Webpack 開發工具，要單獨安裝：node

cnpm install webpack-dev-server --save-dev

如何使用

項目首頁index.html，入口文件entry.js：webpack

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>webpack</title>
    <link rel="stylesheet" href="dist/css/style.css">
</head>
<body>
    <h1>webpack</h1>
    <script src="dist/js/entry.js"></script>
</body>
</html>

entry.js：git

document.write('hi webpack.');

執行命令將src/js/entry.js打包到dist/js/entry.js：github

webpack src/js/entry.js dist/js/entry.js

正常執行後會輸出下面的日誌：web

Hash: 1931694bece61d881e02
Version: webpack 1.14.0
Time: 37ms
   Asset     Size  Chunks             Chunk Names
entry.js  1.42 kB       0  [emitted]  main
   [0] ./src/js/entry.js 30 bytes {0} [built]

打包後的dist/js/entry.js內容(沒壓縮的狀況)：

一個簡單基礎的打包流程實現了，但其實webpack遠不止這麼簡單，它很是強大，咱們能夠把一些功能寫入到配置文件中，在項目的根目錄下面建立一個webpack.config.js

var webpack = require('webpack');

module.exports = {
    entry: './src/js/entry.js',  // 入口文件
    output: {                    // 輸出文件
        path: __dirname + '/dist/js/',
        filename: 'entry.js'
    }
};

而後再項目根目錄運行webpack命令，會自動執行webpack.config.js裏面的配置；
能夠輸入webpack --watch命令運行，會自動監聽文件內容變化，自動打包；
若是開發環境和線上環境的配置有不同的地方，也能夠配置多個webpack.config.js文件，運行命令的時候經過webpack --config webpack-dev.config.js執行不一樣的配置；
還有很重要的一點，代碼都打包了，咱們調試代碼是很不方便的，因此能夠在開發環境的配置文件裏面增長devtool: 'inline-source-map'：

var webpack = require('webpack');

module.exports = {
    entry: './src/js/entry.js',  // 入口文件
    output: {                    // 輸出文件
        path: __dirname + '/dist/js/',
        filename: 'entry.js'
    },
    devtool: 'inline-source-map'  //生成 sourcemap
};

更多配置，去查看官方的介紹吧。http://webpack.github.io/docs/configuration.html

相關標籤/搜索

每日一句

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