必會webpack（一）--- 初識webpack

時間 2019-12-05

標籤必會 webpack 简体版

原文原文鏈接

準備工做

在開始爲項目加入構建前，須要先新建一個web項目，有以下方式：javascript

新建一個目錄，再進入項目根目錄執行npm init
用腳手架工具Yeoman(yeoman.io)直接、快速地生成一個最符合本身的需求的項目

安裝webpack到本項目

安裝Webpack到本項目，可根據本身的需求選擇一下任意命令運行html

#npm i -D 是npm install --save-dev的簡寫，是指安裝模塊並保存到package.json的devDependenciesjava

#安裝最新的穩定版 npm i -D webpackwebpack

安裝最新的體驗版本 npm i -D webpack@betaweb

安裝webpack到全局

npm i -g webpacknpm

推薦使用這種方式安裝，防止不一樣的項目因依賴不一樣版本的Webpack而致使衝突json

簡單實戰

npm install webpak --save--dev(建議使用yarn add webpack 來進行安裝)
npm init(建立一個package.json文件，本次使用yarn init)
在package.json文件中配置打包命令 "scripts": { "start": "webpack --config webpack.config.js" },
搭建項目目錄，以下

項目目錄瀏覽器

index.html
main.js
show.js
webpack.config.js

index.html

<!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>Document</title>
</head>
<body>
    <div id="app">
         
    </div>
</body>
<script src="./dist/bundle.js"></script>
</html>
複製代碼

main.js

// 經過commonjs規範導入show函數
const show = require('./show.js');
show('Webpack');
複製代碼

show.js

// 操做DOM元素，將content顯示到頁面上
function show(content){
    window.document.getElementById('app').innerHTML('hello'+content)
}

module.exports = show;
複製代碼

webpack.config.js

const path = require('path');

module.exports = {
    // JavaScript執行入口文件
    entry: './main.js',
    output:{
        // 將全部依賴的模塊合併輸出到一個bundle.js文件
        filename: 'bundle.js',
        // 將輸出文件都放到dist目錄下
        path: path.resolve(__dirname, './dist'),
    }
}
複製代碼

開始執行

npm run start
複製代碼

最終在目錄下生成一個dist目錄，目錄下生成了一個bundle.js文件，bundle.js是一個可執行的javascript文件，它包含頁面所依賴的兩個模塊main.js、show.js，以及內置的webpackBootstrap啓動函數。這時用瀏覽器打開index.html網頁，將會看到Hello Webpackbash

總結

本章只是簡單的介紹了下webpack的簡單使用，經過本章應該記住如何去構建一個webpack環境。接下來一章我會介紹如何使用Loader、使用Plugin、使用DevServerapp

相關標籤/搜索

每日一句

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