webpack2學習(一)

時間 2019-11-13

標籤 webpack2 webpack 學習简体版

原文原文鏈接

目錄javascript

準備

Node.js
NPM or YARN（本文用的yarn）

前端工程化解決的問題

JavaScript、CSS代碼的合併和壓縮
CSS預處理： Less、Sass、Stylus的編譯
生成雪碧圖(CSS Sprite)
ES6轉ES5
模塊化
...

前端工程化工具--webpack

入口 entry
出口 output
加載器 Loaders
插件 Plugins

webpack模塊化

將業務中寫的各類格式的文件(typescript,less,jpg,vue...)經過特定的加載器(Loader)編譯後，最終生成.js,.css,.png等靜態資源文件。css

模塊：在webpack世界裏，一張圖片、一個css、甚至一個字體，都稱爲模塊(Module)，它們彼此之間存在依賴關係
做用：webpack處理模塊之間的依賴關係，並把它們進行打包html

主要應用場景

SPA(單頁面富應用)

webpack 基礎配置

初始化項目
安裝webpack
安裝webpack-dev-server（提供服務）

//找到合適的目錄下 
//新建一個文件夾用於學習webpack
mkdir webpackStudy
// 進入目錄
cd webpackStudy


// 初始化 快速回車確認便可
npm init 
//成功後 後生成一個package.json文件


// 本地局部安裝webpack 指定版本號(2.3.2)
// 注意 這裏版本號不一樣可能會致使後邊指令運行出錯
yarn add webpack@2.3.2 --save-dev


// 安裝成功後package.json中會多一項配置
"dependencies": {
    "webpack": "2.3.2"
  }
  
// 本地局部安裝webpack-dev-server@2.4.2
//在開發環境中提供：
//啓動一個服務器
//熱更新
//接口代理

yarn add webpack-dev-server@2.4.2 --save-dev

webpack啓動工程

webpack核心-- 一個.js的配置文件,這個配置決定了：架構好壞前端

//在以前的目錄下 （webpackStudy目錄）新建一個js文件

touch webpack.config.js
// 打開此文件
open webpack.config.js
// 初始化
// 因爲目前沒有安裝支持ES6的編譯插件，暫時不能使用
'export default config';
// webpack.config.js文件內容以下
var config = {

}

module.exports = config

向package.json 中的scripts中添加快速啓動webpack-dev-server服務的腳本
(包括打開的局域網ip(不輸入則是默認的本地)，打開的端口號(默認8080))vue

"dev": "webpack-dev-server --host xxx.xxx.xxx.xxx --port 8888 --open --config webpack.config.js"

webpack重要配置之入口(Entry) 和出口(Output)java

入口：告訴webpack從哪裏開始尋找依賴，而且編譯
出口：用來配置編譯後的文件存儲位置和文件名字webpack

新建入口文件 main.js
==webpack會從main.js文件開始工做==web

touch main.js

而且在webpack.config.js中進行入口和出口配置typescript

// webpack.config.js
var path = require('path')

var config = {
    entry: {
        main: './main'
    },
    // 打包文件存儲爲 webpackStudy/dist/main.js
    output: {
        //path 用來存放打包文件的輸出目錄
        path: path.join(__dirname, './dist'),
        // publicPath 資源文件的引用目錄
        // 若是資源存放在CDN上，這裏能夠填寫CDN的網址
        publicpath: '/dist/',
        //filename 指定輸出文件的名稱
        filename: 'main.js'
    }
}

module.exports = config

新建一個index.html 做爲SPA入口npm

touch index.html

//index.html 內容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack study</title>
</head>
<body>
    <div id="app">
        Hello World
    </div>
    <script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>

如今能夠去終端執行