webpack初試

時間 2019-12-12

標籤 webpack 初試简体版

原文原文鏈接

　　前言：

　　　　知道這完兒，沒用過。關於webpack有不少介紹了，就很少說了。放幾個連接，方便新手理解。這是給純沒用過的人瞭解的。這裏只是簡單介紹一下webpack的基本用法。大多內容都是來自webpack/getting-started，外加一些本身的理解。
javascript

　　　　官方介紹　　css

[譯] 用 Webpack 武裝本身html

安裝 webpack:

　 You need to have node.js installed.java

$ npm install webpack -g

　 eg 1:

　新建文件：node

　entry.jswebpack

document.write("It works.");

　index.htmlgit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SETUP THE COMPILATION</title>
</head>
<body>
    <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

　運行：github

$ webpack ./entry.js bundle.js

若是成功，會這樣：


在編輯器裏會自動生成一個bundle.js



在瀏覽器打開index.html，會顯示 It works.

　 eg 2:

　下一步，咱們將代碼依賴到另外一個文件：web

添加 content.jsnpm

module.exports = "It works from content.js.";

　更新 entry.js

document.write(require("./content.js"));

　運行 $ webpack ./entry.js bundle.js

　瀏覽器將輸出：It works from content.js.

webpack 會分析你的入口文件是否依賴其餘文件。若是有，這些文件（模塊）一樣會打包到 bundle.js中。webpack會給每一個模塊分配給惟一的ID，經過ID來訪問這個模塊。

　 eg 3:

　添加CSS樣式到咱們的應用中。打包CSS。

　 webpack只能處理JavaScript 自己，因此咱們須要 css-loader 去處理css文件，咱們還須要用style-loader 將轉換後的css加載到dom中。

$npm install css-loader style-loader

　　Run npm install css-loader style-loader to install the loaders. (They need to be installed locally, without -g) This will create anode_modules folder for you, in which the loaders will live.

看這意思是，要把這個加載的node_modules加載到本地。

　接着，建立個style.css文件

body{
    background-color: yellow;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow';
}

　更新咱們的 entry.js文件

require("!style!css!./style.css");
document.write(require("./content.js"));

　執行

$ webpack ./entry.js bundle.js

　再次打開你的index.html：

若是咱們不想寫過長require，能夠這樣在 entry.js裏

require(「!style!css!./style.css」);，簡化爲require(「./style.css」)。

　 執行：

webpack ./entry.js bundle.js --module-bind 'css=style!css'

「Some environments may require double quotes: –module-bind 「css=style!css」「

一些環境下可能須要雙引號。　

固然，在瀏覽器中你會看到相同的效果。

eg 4:

添加webpack.config.js.

module.exports = {
    entry : "./entry.js",
    output:{
        path:__dirname,
        filename:"bundle.js"
    },
    module:{
        loaders:[
            { test :/\.css$/,loader:"style!css"}
        ]
    }
};

如今，運行：

webpack

webpack 命令將嘗試加載目錄中的webpack.config.js文件。