WEBPACK 入門

時間 2019-11-09

標籤 webpack 入門简体版

原文原文鏈接

webpack 入門

1. 什麼是webpack

官網介紹：webpack是一個模塊打包器。webpack 處理帶有依賴關係的模塊，生成一系列表示這些模塊的靜態資源。(webpack is a module bundler.webpack takes modules with dependencies and generates static assets representing those modules.)。javascript

webpack會把各類資源(js,png,css,less,等等)都做爲模塊來使用和處理,最後轉化成一系列的靜態資源。css

webpack都是怎麼處理這些靜態資源的呢？html

webpack提供了一系列的模塊加載器（loader）來編譯這些模塊。好比處理less文件，webpack提供了less-loader將less文件處理成css，而後再經過css-loader加載成css模塊，最後由style-loader加載器對其作最後的處理,等等。固然，你還能夠定製本身的加載器處理本身的特需需求。java

2. 爲何使用webpack

對於單頁應用來講，隨着項目的發展，在一個頁面中的javascript代碼會愈來愈多，引入的js庫會愈來愈多，這時候就須要把javascript代碼模塊化，這樣才能便於管理和後期的維護。對於一個新項目來講,推薦使用Commonjs規範來編寫代碼，可是webpack爲了兼容之前的舊代碼，又同時支持CMD和AMD規範。node
對於使用react開發項目的團隊來講，webpack是必不可少的react開發神器。webpack中的react-hot-loader插件能夠輕鬆實現react中模塊組件的熱替換，無刷新頁面就能夠實時查看頁面所作的修改。有這樣的功能，誰還會拒絕使用webpack呢？react

3. 使用webpack

npm install webpack -g

安裝成功後執行webpack -V 命令行會輸出webpack的版本後和webpack所有的options（選項）。webpack

咱們在當前項目根目錄下新建一個webpack.config.js文件，爲webpack命令配置選項。固然你還能夠經過命令行的方式來配置，可是那樣太麻煩，每次執行都要敲一大堆命令，想一想沒人會這麼幹。es6

一個簡單的webpack配置以下所示:web

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

    module.exports = {
        entry: './src/main.js', //入口文件,webpack會從入口文件出開始查找依賴遞歸進行打包
        output: {
            path: path.join(__dirname, 'www'),　　//打包後的文件位置
            filename: 'js/bundle.js',　　//打包後的文件名
        },
        module: {
        loaders: [　　//配置模塊加載器,數組形式
            { test: /\.(js|jsx)$/, loaders: ['babel?presets[]=react,presets[]=es2015'] },//babel加載器用於將es6轉化成es5,使用前請先安裝babel-loader再引入加載器
            ],
        }
    };

在src下建立一個main.js做爲入口文件：npm

在main.js寫入如下內容:

document.write('study webpack!');

保存文件，在項目根目錄下執行webpack命令後就會在www/js目錄下生產打包後的bundle.js文件

而後咱們在www目錄下的index.html文件中直接用script標籤引入這個生成的bundle.js就ok了。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<!--引入生成的bundle.js-->
<script type="text/javascript" src="./js/bundle.js"></script>
</body>
</html>

在瀏覽器中打開index.html。
能夠看到頁面出現了main.js中咱們要打印的內容：

4. 安裝webpack開發服務器(webpackd-dev-server)

webpack不只提供了模塊打包功能,還爲開發者提供了一個開發服務器,這個開發服務器會監聽文件中的每個改動,文件改動會觸發瀏覽器自動刷新頁面,實時查看本身代碼中的修改。執行下面命令做爲依賴安裝webpack-dev-server:

npm install webpack-dev-server --save-dev

在webpack.config.js同級目錄下,新建一個server.js,配置webpack-dev-server參數。爲了使熱替換生效必須在如下三個位置配置信息：

在server.js中設置hot:true參數
在webpack.config.js的entry中加入'webpack/hot/dev-server
在webpack.config.js的plugins中加入HotModuleReplacementPlugin

具體配置信息以下：

server.js配置:

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config.js');
new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,　　//開啓熱調試
    historyApiFallback: true
}).listen(3000, '127.0.0.1', function (err, result) {
    if (err) {
        console.log(err);
    }
    console.log('server start');
});

webpack.config.js也要作修改:

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

module.exports = (function( ) {
    var config = {
        entry: [
            'webpack-dev-server/client?http://127.0.0.1:8000',
            'webpack/hot/dev-server',
            './src/main.js'
        ],
        output: {
            path: path.join(__dirname, 'www'),
            filename: 'js/bundle.js',
            publicPath: '/www/'
        },
        module: {
            loaders: [
            ],
        }
    };

    config.plugins = [
        new webpack.NoErrorsPlugin(), //容許錯誤不打斷程序
        new webpack.HotModuleReplacementPlugin(),　　//webpack熱替換插件
    ];


    return config;

})();

修改main.js中的內容:

document.write('study webpack by webpack-dev-server);

修改事後執行以下命令:

node server.js

當在命令行看到

webpack: bundle is now VALID.

說明打包成功。咱們刷新頁面，能夠發現頁面發生了變化。

而且控制檯出現了兩條語句

HMR前綴的信息由webpack/hot/dev-server模塊產生，WDS前綴的信息由webpack-dev-server客戶端產生。（Messages prefixed with [HMR] originate from the webpack/hot/dev-server module. Messages prefixed with [WDS] originate from the webpack-dev-server client.）

咱們能夠發如今www/js/目錄下並無產生bundle.js,由於經過webpack-dev-server打包出來的文件並無實質性的生成存儲在磁盤中,而是生成保存在內存中。每次執行node server.js 太繁瑣,咱們能夠在package.json中爲這條命令另起別名: