WebPack使用流程小記

許佳佳233發表於2017-11-14
Web

本篇文章記錄為主
主要參考WebPack官網：http://webpack.github.io/docs/

WebPack常用流程

1、安裝WebPack
2、準備要打包的檔案
3、安裝loader
4、配置檔案
5、生成檔案並執行

示例

檔案目錄（WebStorm）

這裡寫圖片描述

安裝WebPack

npm install webpack -g

準備要打包的檔案

entry.js

require("./style.css");
document.write('It works.');

index.js

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

style.css

body {
    background: yellow;
}

安裝loader

npm install css-loader style-loader

配置檔案

webpack.config.js

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

生成檔案並執行

直接在終端輸入

webpack

然後執行index.html，最終效果如下：
這裡寫圖片描述

相關文章