Webpack入門

時間 2019-12-18

標籤 webpack 入門简体版

原文原文鏈接

（1）安裝webpackjavascript

在安裝 Webpack 前，你本地環境須要支持 node.js。css

因爲 npm 安裝速度慢，本教程使用了淘寶的鏡像及其命令 cnpm，安裝使用介紹參照：使用淘寶 NPM 鏡像。html

使用 cnpm 安裝 webpack：java

cnpm install webpack –gnode

（2）建立項目webpack

1）建立一個app項目，命令：mkdir appweb

2）建立一個run00b1.js文件。代碼以下：document.write("It works.");
3）添加index.html文件。加入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>npm

4）運行打包命令：webpack runoob1.js bundle.js緩存

5)建立第二個js文件 runoob2.js，添加代碼：app

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

6）更新runoob1.js文件

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

（3）安裝loader模塊，來加載css文件，命令：（全局安裝須要參數 -g）
cnpm install css-loader style-loader

1） index.css文件
body{background：yellow}

2）修改app/runoob1.js文件
require("!style-loader!css-loader!./style.css");
document.write(require("./runoob2.js"));

3）打包命令：
webpack runoob1.js bundle.js

（4）配置文件，爲了便於管理建立webpack.config.js文件

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

（5）插件安裝，安裝內置的 BannerPlugin 插件，用於在文件頭部輸出一些註釋信息。

命令：cnpm install webpack --save-dev

修改webpack.config.js文件。

var webpack=require('webpack');
module.exports = {
    entry: "./runoob1.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    },
    plugins:[
        new webpack.BannerPlugin('菜鳥教程 webpack 實例')
    ]
};

運行命令：webpack

（6）開發環境

1) 當項目逐漸變大，webpack 的編譯時間會變長，能夠經過參數讓編譯的輸出內容帶有進度和顏色。

webpack --progress –colors

2) 若是不想每次修改模塊後都從新編譯，那麼能夠啓動監聽模式。開啓監聽模式後，沒有變化的模塊會在編譯後緩存到內存中，而不會每次都被從新編譯，因此監聽模式的總體速度是很快的。

webpack --progress --colors --watch

3) 若是不想每次修改模塊後都從新編譯，那麼能夠啓動監聽模式。開啓監聽模式後，沒有變化的模塊會在編譯後緩存到內存中，而不會每次都被從新編譯，因此監聽模式的總體速度是很快的。

webpack --progress --colors –watch

能夠瀏覽項目中的頁面和編譯後的資源輸出，而且經過一個 socket.io 服務實時監聽它們的變化並自動刷新頁面。

4)安裝命令：
# 安裝 cnpm install webpack-dev-server -g

# 運行 webpack-dev-server --progress --colors