從零開始用webpack構建單頁/多頁應用開發環境

時間 2020-02-26

標籤開始 webpack 構建單頁多頁應用開發環境简体版

原文原文鏈接

這篇文章主要就是一步一步地，實現用webpack配置一個簡單的web開發環境。css

初始化文件夾，新建配置文件和測試代碼

新建一個空的文件夾，這裏就叫作webpack-basic-project，而後在文件夾下面執行html

npm init -y

安裝webpack依賴node

yarn add --dev webpack webpack-cli webpack-dev-server

新建一個webpack的配置文件webpack.config.js
新建一個babel配置文件.babelrc
新建src文件夾，並添加index.js,index.html,index.scss,加入測試代碼
index.js:react

import "./index.scss";

function test() {
  var root = document.getElementsByClassName("root")[0];
  var p = document.createElement("p");
  var text = document.createTextNode("hello world");
  p.appendChild(text);
  root.appendChild(p);
}

test();

index.htmlwebpack

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack basic sample</title>
  </head>
  <body>
    <div class="root"></div>
  </body>
</html>

index.scssweb

.root {
  color: red;
}

也就是這個時候咱們的文件夾結構是：
npm

配置單頁應用

一個最基本的配置是這樣的json

module.export = {
    entry: {},
    mode: "",
    output: {},
    module: {
        rules: [
        ]
    },
    plugins: [] 
}

mode

因爲webpack4默認會啓動js壓縮，爲了方便看效果，咱們先用開發模式吧api

mode: "development"

entry

咱們先添加entry，也就是入口文件瀏覽器

entry: {
    index: "./src/index.js",
    search: "./src/search/search.js"
 },

output

而後添加output,也就是編譯後輸出的文件夾，咱們最後經過瀏覽器訪問的也就是這裏的。

output: {
    path: path.join(__dirname, "dist"),
    // publicPath: "./" 會給引入的文件前面加個前綴，主要是用於生產環境
    filename: "[name].js"
  },

loader

接着配置Loader,loader就是用來解析文件的。咱們須要解析的就是js,css，圖片、字體文件。一個一個說明。

解析js: 用babel-loader

安裝依賴：

@babel/core是babel的核心api包，必需要安裝。
@babel/preset-env 它提供一個target參數，能夠讓咱們設置要支持的目標環境，從而能用不一樣的解析方式去轉換js。官方推薦經過新建一個.browserslistrc來設置。
@babel/preset-react 考慮到後面要用react加進去的。不須要的能夠不添加。

yarn add --dev @babel/core @babel/preset-env babel-loader @babel/preset-react

在webpack.config.js裏添加babel-loader

module: {
    rules: [
      {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        use: "babel-loader"
      }
    ]
 }

編輯.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": []
}

解析scss

安裝依賴

sass-loader：轉換sass爲css
css-loader: 解析css
mini-css-extract-plugin: 把css提取成一個獨立的文件

yarn add --dev sass-loader node-sass css-loader mini-css-extract-plugin

因爲loader是鏈式調用，從右到左，也就是最右邊的loader執行完的結果會傳遞給它旁邊的Loader。因此咱們寫的順序是sass-loader->css-loader->mini-css-extract-plugin

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  module.exports = {
    module: {
        rules: [
              {
                test: /.scss$/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
              }
        ]
    }
  }

解析圖片跟字體

安裝依賴

yarn add --dev file-loader

添加配置

module: {
  rules: [
      {
        test: /.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: "file-loader"
          }
        ]
      },
      {
        test: /.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name]_[hash:8][ext]"
            }
          }
        ]
      }
  ]
}

plugins

安裝依賴

yarn add --dev html-webpack-plugin clean-webpack-plugin

html-webpack-plugin：用於根據html模板，生成一個新的html文件，把咱們打包出來的js文件嵌入到html中
clean-webpack-plugin：用於每次打包前都把dist文件夾清空。

plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, `./src/index.html`),
      filename: "index.html",
      chunks: ["index", "commons"],
      inject: true
    }),
    new CleanWebpackPlugin()
 ],

devServer

因爲咱們開發模式下使用webpack-dev-server，因此這裏設置一下熱替換

module.exports = {
  devServer: {
    hot: true
  }   
}

最後，在package.json下面添加啓動命令

"scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server --config webpack.config.js --open"
  },

這個時候，咱們執行npm run build，就會發如今dist文件夾下面已經有輸出了。打開index.html，能夠看到它引入了index.js跟index.css，打開也確實是輸出了hello world。

執行npm run dev,打開http://localhost:8080,也能夠看到index.html的內容。因爲webpack-dev-server的輸出是在內存中的，因此咱們這個時候是不會建立dist文件夾的。