webpack筆記-webpack初識與構建工具發展（一）

時間 2020-06-04

標籤 webpack 筆記構建工具發展简体版

原文原文鏈接

爲何須要構建工具？

轉換 ES6 語法
轉換 JSX
CSS 前綴補全/預處理器
壓縮混淆
圖片壓縮

前端構建演變之路

ant + YUI Tool
grunt
gulp、fis3
webpack、rollup、parcel

爲什麼選擇 webpack?

社區態豐富
配置靈活和插件化擴展
官方更新迭代速度快

初識webpack，簡單的例子入手

安裝

先確保你已經安裝了 Node

其中檢查node是否安裝成功，使用node -v；檢查npm的版本使用npm -v。
建立一個新的項目來開始咱們的 webpack 之旅：javascript

mkdir webpack-custom
cd webpack-custom

使用 npm init （或者使用npm init-y表示默認配置都選擇yes）來建立一個「package.json」文件用於管理項目版本和依賴，而後咱們使用 npm安裝webpack:html

npm install webpack webpack-cli -D

webpack-cli 是使用 webpack 的命令行工具，在 4.x 版本以後再也不做爲 webpack 的依賴了，咱們使用時須要單獨安裝這個工具。

檢查是否安裝成功：前端

mac系統：./node_modules/.bin/webpack -vjava

window系統：.node_modules.binwebpack -vnode

安裝成功以後，咱們能夠在項目的「package.json」文件中看到對應的 webpack 版本依賴：webpack

"devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }

構建

安裝完成以後，咱們能夠使用 ==npx webpack ==命令來運行項目內安裝的 webpack。web

其中，咱們能夠使用以下命令執行一些操做：npm

npx webpack --help:查看 webpack-cli 提供了哪些命令可用
npx webpack --version:查看咱們安裝的版本
npx webpack:運行構建

咱們先添加兩個簡單的代碼文件，「src/index.js」和「src/hello.js」，如代碼：json

index.js代碼：gulp

import { hello, log } from './hello.js';
log(hello);

hello.js代碼：

export const hello = 'hello world';

export function log(message) {
  console.log(message);
}

咱們執行npx webpack會在src同級目錄生成一個dist/main.js文件，這就是使用webpack構建的結果，固然構建咱們也能夠使用以下命令執行：.\node_modules\.bin\webpack，咱們也能夠npm script運行webpack,也便是把構建命令寫到 package.json 的 scripts 中：

"scripts": {
    "build": "webpack"
  },

而後咱們就能夠使用npm run build命令構建webpack了。

配置文件

接下來咱們嘗試建立一個webpack的配置文件，在咱們項目的根目錄下建立一個「webpack.config.js」的文件：

'use strict';
var path = require('path');
module.exports = {
    mode: 'development',  // 指定構建模式
    entry: './src/index.js', // 指定構建入口文件
    output: {
        path: path.join(__dirname,'dist'), // 指定構建生成文件所在路徑
        filename: 'bundle.js' // 指定構建生成的文件名
    },
}

而後咱們執行npm run build，就會生成「dist/bundle.js」文件，這說明配置文件生效了。

本地開發

在平常開發中，咱們不可能每次修改一次代碼就執行一次構建，咱們須要一個方便本地開發的工具，和 webpack配套的則是webpack-dev-server。一樣的，咱們使用 npm 來安裝：

npm install webpack-dev-server -D

一樣地，咱們在「package.json」文件的scripts字段中添加一個啓動開發服務器的命令，如：

"scripts": {
    "build": "webpack",
    "serve": "webpack-dev-server"
  }

這個時候咱們還須要一個「index.html」文件做爲頁面的基礎，webpack 暫時沒有能力來處理 html 文件（須要經過插件來處理），咱們先在 dist 目錄下建立一個「index.html」文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>webpack-demo</title>
    </head>
    <body>
        <script type="text/javascript" src="bundle.js"></script>
    </body>
</html>

同時，在配置文件中添加指定開發服務器啓動路徑的配置：

devServer: {
    contentBase: path.resolve(__dirname, 'dist') // 開發服務器啓動路徑
  }

接着再執行 npm run serve，即可以成功啓動 webpack-dev-server 了，默認使用的端口是 8080，用瀏覽器打開 http://localhost:8080/，即可以訪問到咱們剛纔建立的html文件了，打開控制檯就能夠看到前邊的 js 代碼打印出來的 hello world 了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。