從0構建webpack開發環境(一) 一個簡單webpack.config.js

時間 2019-11-24

標籤構建 webpack 開發環境一個簡單 webpack.config.js config 欄目 JavaScript 简体版

原文原文鏈接

本文基於webpack4.X，使用的包管理工具是yarn

概念相關就不搬運了，直接開始css

首先項目初始化html

mkdir webpack-demo && cd webpack-demo
yarn init

在項目中安裝webpack和webpack-cli(webpack4.X須要)vue

yarn add webpack webpack-cli --dev

緊接着在項目中建立三個文件src/index.js,dist/index.html,webpack.config.js，
webpack.config.jswebpack

const path = require('path')

module.exports = {
  entry: {
    app: path.resolve(__dirname, './src/index.js') // 以src/index.js爲項目入口
  },
  output: {
    filename: 'bundle.js',   //打包後的名稱
    path: path.resolve(__dirname, 'dist')  //打包後的輸出到該目錄下
  }
}

src/index.jsweb

import _ from 'lodash'

function createComponent(tag) {
  let element = document.createElement(tag)

  element.innerHTML = _.join(['Hello', 'webpack'], ', ')

  return element
}

document.body.append(createComponent('div'))

index.js中引入的一個第三方庫 lodash,因此須要安裝執行yarn add lodashnpm

dist/index.htmljson

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>webpack demo</title>
</head>
<body>
  
  <script src="./bundle.js"></script>
</body>
</html>

完成上述步驟後會獲得如下項目目錄，以index.js爲入口，其中依賴於第三方庫lodash, 打包輸出到dist目錄下,
能夠看到在index.html中引入了同目錄的bundle.js文件，可是如今尚未生成瀏覽器

接着在package.json文件的scripts屬性中添加如下語句塊app

"scripts":{
        "build": "webpack --config webpack.config.js"
    }

添加以後就能夠經過 npm run build 或者 yarn build 命令執行打包, --config webpack.config.js代表webpack以該配置文件裏的配置項進行打包，如不添加則會使用webpack默認的打包配置模塊化

而後執行 yarn build

打包成功，同時dist文件夾下多了一個bundle.js文件,

在瀏覽器中打開index.html就會看到輸出的信息

到此，就成功完成了一個簡單的webpack環境構建，然而這只是webpack的基礎配置項 entry和output。webpack自己只會識別js文件，
在實際開發中會有css,img,字體圖標或者.vue,.jsx等文件，這些文件均可以以模塊化的方式添加到項目中。可是這些文件webpack自己並不會識別，主要依賴於loader的解析。
同時文中還須要手動添加index.html文件，這個能夠經過plugins進行自動建立html文件。

本篇章中涉及到的幾個依賴包

下一篇從0構建webpack開發環境(二) 添加css,img的模塊化支持