webpack的安裝過程

%就是我發表於2018-08-18
Web

npm install -g webpack 還有cli

npm init  在指定資料夾執行此命令，可以自動建立package.json檔案；

package.json是標準的npm說明檔案，裡面列出了當前專案的依賴模組，使用者資訊，自定義的指令碼任務等；

在根目錄建立app和public資料夾：

1、app資料夾用來存放原始資料和我們寫的js模組

2、public資料夾用來存放供瀏覽器讀取的檔案（即本地伺服器所載入的目錄），包括index.html、打包生成的js檔案

  • index.html --放在public資料夾中; -----------------自動載入主頁
  • Greeter.js-- 放在app資料夾中;
  • main.js-- 放在app資料夾中;-------------------入口檔案

在index.html裡事先引入打包後的js（bundle.js)檔案

使用配置檔案來使用webpack，配置檔案其實也是一個簡單的js模組

1、首先，在根目錄下新建一個名為webpack.config.js的檔案

module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口檔案
  output: {
    path: __dirname + "/public",//打包後的檔案存放的地方
    filename: "bundle.js"//打包後輸出檔案的檔名
  }
}
注：“__dirname”是node.js中的一個全域性變數，它指向當前執行指令碼所在的目錄。
複製程式碼

Source Maps：在一個單獨的檔案中產生一個完整且功能完全的檔案。這個檔案具有最好的source map，但是它會減慢打包速度；

webpack.config.js檔案

配置sourcemap

入口檔案

出口檔案

伺服器的配置選項

  • 伺服器載入頁面所在的目錄
  • 實時更新
  • 跳轉
  • port：8080

loader

babel-loader\style-loader\

  • test：一個用以匹配loaders所處理檔案的擴充名的正規表示式（必須）
  • loader：loader的名稱（必須）
  • include/exclude:手動新增必須處理的檔案（資料夾）或遮蔽不需要處理的檔案（資料夾）（可選）；
  • query：為loaders提供額外的設定選項（可選）

    • module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    } 複製程式碼

    外掛（Plugins）：loaders是在打包構建過程中用來處理原始檔的（JSX，Scss，Less..），一次處理一個，外掛並不直接操作單個檔案，它直接對整個構建過程其作用。

    const webpack = require('webpack');

module.exports = {
...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版權所有，翻版必究')
    ],
};複製程式碼




    相關文章