webpack學習筆記(二) 入門

時間  2019-11-13
標籤 webpack 學習 筆記 入門 简体版
原文   原文鏈接

這篇文章咱們將經過一個小小的 Demo 瞭解 webpack 的基本使用javascript

一、入門

首先咱們建立一個空目錄 Demo，做爲項目的根文件夾css

在目錄下運行 npm init 命令，初始化文件 package.jsonhtml

> npm init -y # 以默認的方式初始化 package.json 文件

而後，咱們能夠經過 NPM 安裝 webpackjava

> npm install --save-dev webpack

若是使用的是 webpack 4+ 版本，那麼還須要安裝 webpack-clinode

> npm install --save-dev webpack-cli

接着，咱們在根目錄下建立兩個文件夾 dist（用於管理輸出文件） 和 src（用於管理資源文件）webpack

src 文件夾放本身寫的代碼文件，dist 文件夾放打包以後的文件，更準確的說是用於發佈的文件web

在 dist 文件夾下建立 index.html 文件，並寫上下面的代碼shell

<!doctype html>
<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
        <!-- 這裏引用的 main.js 文件會在打包以後生成 -->
        <script src="main.js"></script>
    </body>
</html>

在 src 文件夾下建立 index.js 文件，並寫上下面的代碼npm

// 引用 lodash 模塊，webpack 會將其一塊兒打包
// 因爲 lodash 是一個外部模塊，因此使用以前要先安裝：npm install --save lodash
import _ from 'lodash';

function component() {
    var element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
}

document.body.appendChild(component());

此時，文件夾的目錄結構以下json

Demo
    - package.json
    - package-lock.json
    + node_modules
    + src
        - index.js
    + dist
        - index.html

好，這時咱們運行 webpack 打包文件，它將 /src/index.js 打包後輸出到 /dist/main.js

> npx webpack
> # 或者直接運行 webpack 的二進制文件 `./node_modules/.bin/webpack`
> # windows 下運行 webpack 的二進制文件 `node_modules\.bin\webpack`

以後，咱們應該能夠看到在 dist 目錄下生成了一個 main.js 文件

而後，用瀏覽器打開 dist 目錄下的 index.html 文件應該能夠看到 Hello webpack 的文本

二、配置文件

到目前爲止，咱們使用的都是 webpack 的默認配置，好比說入口文件和輸出文件

若是想要更豐富的自定義配置，那麼咱們也能夠本身寫一個配置文件 webpack.config.js

這樣 webpack 會自動讀取，如今整個項目的文件結構以下

Demo
    - package.json
    - package-lock.json
    - webpack.config.js
    + node_modules
    + src
        - index.js
    + dist
        - index.html

而後咱們在 webpack.config.js 文件中寫下配置

const path = require('path');

module.exports = {
    // 入口文件
    entry: './src/index.js',
    // 輸出文件
    output: {
        filename: 'bundle.js', // 這裏咱們將輸出文件命名爲 bundle.js
        path: path.resolve(__dirname, 'dist')
    }
};

由於打包後輸出的文件名改變了，因此咱們還要去 /dist/index.html 改一下引用的文件名

<!doctype html>
<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
        <!-- 將引用的文件改成 bundle.js -->
        <script src="bundle.js"></script>
    </body>
</html>

最後，咱們再用 webpack 進行打包，並使用指定的配置文件

> npx webpack --config webpack.config.js

能夠看到，運行命令以後會在 dist 目錄下生成一個 bundle.js 文件

一樣，用瀏覽器打開 dist 目錄下的 index.html 文件應該能夠看到 Hello webpack 的文本

這證實配置文件已經生效啦

三、NPM 命令

通常 webpack 的啓動命令都會附加多個參數，因此每次構建的時候都要輸入很長的一串命令

這也太麻煩了一些，因此咱們能夠在 package.json 文件的 script 中添加一個 build 命令

{
    "name": "Demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack --config webpack.config.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^4.39.2",
        "webpack-cli": "^3.3.7"
    },
    "dependencies": {
        "lodash": "^4.17.15"
    }
}

而後，當須要運行構建命令的時候，直接輸入命令 npm run build 便可

四、管理資源

webpack 雖然只能理解 JavaScript 模塊，可是經過 loader 也能引入其它類型的文件

下面咱們以引入 CSS 文件爲例，處理 CSS，咱們須要使用 style-loader 和 css-loader

> npm install --save-dev style-loader css-loader

而後在配置文件 webpack.config.js 中指定處理規則

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                // 指定須要處理的文件
                test: /\.css$/,
                // 指定須要使用的 loader
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
};

好，而後咱們能夠開始寫樣式文件啦，目錄結構以下

Demo
    - package.json
    - package-lock.json
    - webpack.config.js
    + node_modules
    + src
        - index.js
        - index.css
    + dist
        - index.html

index.css 文件的內容以下

.hello {
    color: red;
}

而後在 index.js 文件中引入 index.css（做爲一個模塊引入）

import _ from 'lodash';
// 引入 CSS 文件
import './index.css';

function component() {
    var element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello'); // 添加樣式
    return element;
}

document.body.appendChild(component());

最後運行構建命令 npm run build 打包項目

這時，在瀏覽器打開 /dist/index.html 文件應該能夠看到文字變成紅色

五、管理輸出

咱們可使用插件管理輸出，這裏以 clean-webpack-plugin 插件爲例

還記得咱們在還沒建立 webpack.config.js 文件以前，打包以後默認的輸出文件是 main.js

此後，這個文件就一直殘留在 /dist 目錄（假設沒有手動刪除的話），這樣實際上是十分不科學的

因此咱們可使用 clean-webpack-plugin 插件，在從新打包以後把不須要用到的文件自動清除

首先咱們來安裝插件

> npm install --save-dev clean-webpack-plugin

而後在 webpack.config.js 文件中進行配置

const path = require('path');
// 引入插件，注意引入 CleanWebpackPlugin 插件須要用到解構語法
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    // 使用插件
    plugins: [
        // 刪除 output.path 指定目錄中的全部文件，而後從新構建打包
        new CleanWebpackPlugin({
            // 指定刪除的文件和不被刪除的文件，使用 ! 指定不被刪除的文件
            cleanOnceBeforeBuildPatterns: ['*.js', '!index.html']
        })
    ]
};

好，這時候從新運行構建命令

> npm run build

你會發現 dist 文件夾中只剩下兩個文件，分別是 index.html 和 bundle.js，是否是瞬間變得清爽起來呢

【 閱讀更多 webpack 系列文章，請看 webpack學習筆記 】

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程