Webpack4新手完全攻略

木子昭發表於2018-04-25
Web

  • 為了優化前端工程, 我們通常會將靜態檔案壓縮,減少頻寬佔用; 將靜態檔案合併,減少http請求, webpack可以輕易實現靜態檔案的壓縮合並以及打包的功能, 除此之外, webpack還支援眾多的loader外掛, 通過loader外掛可實現眾多型別(如vue, less, jpg, css)資源的打包

  • webpack的文件寫的相當出色, 為了方便讀者學習, 下面每一類配置的註釋裡, 都附上了參考的原文件地址, 如果以後配置更新了,也方便檢視更新的文件

  • 如果不想自己配置, 可以直接拷貝最後的配置文件到自己的專案中, 所有的案例資源附在了文章末尾, 歡迎下載學習

Webpack

新建專案start-webpack, 初始化npm

mkdir start-webpack
cd start-webpack
npm init -y
  • 初始化後, npm自動建立npm配置檔案
初始化

通過npm, 安裝webpack

npm install -D webpack
# webpack4.0 需要 額外安裝webpack-cli
npm install -D webpack-cli
  • 這裡的-D表示只在開發階段使用webpack, 最終打包上線的專案並不需要webpack
安裝後

手動建立webpack配置檔案webpack.config.js

webpack.config.js
建立四個檔案

配置package.json,自定義webpack打包命令 官方參考

官方參考 https://webpack.js.org/guides/getting-started/

build
  • 執行命令npm run webpack, 進行打包, 獲得 ./dist/bundle.js 
npm run webpack
打包檔案
  • 測試打包效果
打包成功

靜態檔案打包(以css, 圖片為例)

# 解決html的輸出到dist  參考: https://webpack.js.org/guides/output-management/
npm install -D html-webpack-plugin
# 增加對css的支援 參考: https://webpack.js.org/guides/asset-management/#loading-css
npm install -D style-loader css-loader
# 增加對圖片的支援 參考: https://webpack.js.org/guides/asset-management/#loading-images
npm install -D file-loader

支援less轉義打包

# 安裝 less-loader less 參考:https://webpack.js.org/loaders/less-loader/ 
npm install -D less-loader less

支援es6語法轉義

# es6語法轉義到es5 參考: https://webpack.js.org/loaders/babel-loader/
npm install "babel-loader@^8.0.0-beta" @babel/core @babel/preset-env
npm install @babel/plugin-transform-runtime --save-dev
npm install @babel/runtime --save
# 使用墊腳片polyfill, 將es6的api實現出來 參考: https://babeljs.io/docs/usage/polyfill/
npm install --save babel-polyfill

載入使用第三方包 (專案優化方案)

單獨載入第三方包
# 如果將vue打包到bundle.js會增大bundle.js的體積, 所以我們配置使用全域性的第三方包, 參考: https://webpack.js.org/configuration/externals/
npm install -S vue

支援vue.js打包

# 支援vue單檔案元件載入, 參考:https://vue-loader.vuejs.org/guide/
npm install -D vue-loader vue-template-compiler

支援自動打包, 支援熱過載

儲存即生效,無需重新整理更新資料
# 自動打包工具  參考: https://webpack.js.org/guides/development/
npm install -D webpack-dev-server
# 支援熱過載(vue子元件可無重新整理更新資料), 參考: https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr
發包目錄

最終專案結構
  • 發包命令: npm install --production
生產環境目錄

最終webpack.config.js配置檔案資訊:

const path = require(`path`);
const HtmlWebpackPlugin = require(`html-webpack-plugin`);
const { VueLoaderPlugin } = require(`vue-loader`);
const webpack = require(`webpack`);

module.exports = {

    // 設定墊腳片,設定js入口
    entry: [`babel-polyfill`, `./src/index.js`],
    // 使用開發伺服器, 將服務執行在dist目錄中(其實是虛擬於記憶體中的)
    // 為了解決第三方包的路徑問題, 我們將`./dist`改為`./`
    devServer: {
        // 設定虛擬目錄所在位置
        // contentBase: `./dist`
        contentBase: path.join(__dirname, "./"),
        // 自動壓縮輸出的檔案
        compress: true,
        // 測試埠為 9000
        port: 9000,
        // 熱更新元件
        hot: true
    },
    // 解決index.html輸出到dist的問題
    plugins: [
        new HtmlWebpackPlugin({
            title: "主頁",
            template: "./page.html"
        }),
        new VueLoaderPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    // 單獨 載入使用第三方包
    externals: {
        jquery: `jQuery`,
        vue: `Vue`
    },
    // 設定 js 輸出位置
    output: {
        path: path.resolve(__dirname, `dist`),
        filename: `bundle.js`
    },
    module: {
        rules: [
            // 解決載入css資源
            {
                test: /.css$/,
                use: [
                    `style-loader`,
                    `css-loader`
                ]
            },
            // 解決載入圖片資源
            {
                test: /.(png|svg|jpg|gif)$/,
                use: [
                    `file-loader`
                ]
            },
            // 解決載入 less資源
            {
                test: /.less$/,
                use: [{
                    loader: `style-loader` // 3. 通過js 以內聯樣式 插入到頁面中
                }, {
                    loader: `css-loader` // 2. 把css 轉化到 js
                }, {
                    loader: `less-loader` // 1. 把less編譯成css
                }]
            },
            // 解決es6轉為es5
            {
                test: /.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: `babel-loader`,
                    options: {
                        presets: [`@babel/preset-env`],
                        plugins: [`@babel/plugin-transform-runtime`]
                    }
                }
            },
            // 支援vue的載入
            {
                test: /.vue$/,
                loader: `vue-loader`
            }
        ]
    }
};

最終package.json

{
  "name": "start-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.46",
    "@babel/plugin-transform-runtime": "^7.0.0-beta.46",
    "babel-plugin-transform-runtime": "^6.23.0",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.0.2",
    "less-loader": "^4.1.0",
    "style-loader": "^0.21.0",
    "vue-loader": "^15.0.0",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.3"
  },
  "dependencies": {
    "@babel/preset-env": "^7.0.0-beta.46",
    "@babel/runtime": "^7.0.0-beta.46",
    "babel-loader": "^8.0.0-beta.2",
    "babel-polyfill": "^6.26.0",
    "babel-runtime": "^6.26.0",
    "vue": "^2.5.16"
  }
}

結合以上配置, 用vue元件化的方式寫了一個簡單的頁面

demo

教程涉及到的資源我都通過百度網盤分享給大家,為了便於大家的下載,資源整合到了一張獨立的帖子裡,連結如下:
http://www.jianshu.com/p/4f28e1ae08b1


相關文章