webpack配置筆記

前端鹹蛋黃發表於2019-04-17
Web筆記

//本文為前端小白自學筆記，內容不可信。參考大佬的文章：入門 Webpack，看這篇就夠了

一、基本配置

1. 準備工作

npm install -g webpack@3.5.3
// my-demo
npm init
npm install --save-dev webpack@3.5.3
複製程式碼

在根目錄下建立兩個資料夾

  • public
  • app

建立三個檔案

  • index.html --放在public資料夾中
  • Greeter.js-- 放在app資料夾中
  • main.js-- 放在app資料夾中

在index.html檔案中寫入最基礎的html程式碼

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>
複製程式碼

在Greeter.js中定義一個返回包含問候資訊的html元素的函式

// Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};
複製程式碼

main.js檔案中我們寫入下述程式碼

//main.js 
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());
複製程式碼

2. 正式使用

在根目錄下新建一個名為webpack.config.js的檔案，我們在其中寫入如下所示的簡單配置程式碼

module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口檔案
  output: {
    path: __dirname + "/public",//打包後的檔案存放的地方
    filename: "bundle.js"//打包後輸出檔案的檔名
  }
}
複製程式碼

在命令列中輸入webpack即可打包

3.更快捷的執行打包任務

在package.json中對scripts物件進行相關設定即可，設定方法如下。

{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
    "start": "webpack" // 修改的是這裡，JSON檔案不支援註釋，引用時請清除
  },
  "author": "zhang",
  "license": "ISC",
  "devDependencies": {
    "webpack": "3.10.0"
  }
}
複製程式碼

在命令列輸入 npm start 即可打包

二、生成Source Maps

1. Source Maps

Source Map則可以用於還原真實的出錯位置，幫助開發者更快的Debug。

2. 配置

//webpack.config.js
module.exports = {
  devtool: 'eval-source-map', //新加入
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}
複製程式碼

三、使用webpack構建本地伺服器

1. webpack-dev-server

構建本地伺服器，實現自動重新整理等功能

2. 配置

npm install --save-dev webpack-dev-server@2.7.1
複製程式碼

把這些命令加到webpack的配置檔案中，現在的配置檔案webpack.config.js如下所示

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

  devServer: {
    contentBase: "./public",//本地伺服器所載入的頁面所在的目錄
    historyApiFallback: true,//不跳轉
    inline: true//實時重新整理
  } 
}
複製程式碼

在package.json中的scripts物件中新增如下命令，用以開啟本地伺服器：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
},
複製程式碼

終端輸入npm run server即可

四、使用babel-loader

1. babel-loader

用於將使用ES6規範的js程式碼，轉為ES5。

2. 配置

一次性安裝這些依賴包

npm install --save-dev babel-core babel-loader babel-preset-env
複製程式碼

對檔案進行配置

\\webpack.config.js
module.exports = {
  entry: __dirname + "/app/main.js",//已多次提及的唯一入口檔案
  output: {
      path: __dirname + "/public",//打包後的檔案存放的地方
      filename: "bundle.js"//打包後輸出檔案的檔名
  },
  devtool: 'eval-source-map',
  devServer: {
      contentBase: "./public",//本地伺服器所載入的頁面所在的目錄
      historyApiFallback: true,//不跳轉
      inline: true//實時重新整理
  },
  module: {
      rules: [
          {
              test: /(\.jsx|\.js)$/,
              use: {
                  loader: "babel-loader",
                  options: {
                      presets: [
                          "env"
                      ]
                  }
              },
              exclude: /node_modules/
          }
      ]
  }
};
複製程式碼

四、使用css-loader 和 style-loader

1. css-loader 和 style-loader

css-loader使你能夠使用類似@import 和 url(...)的方法實現 require()的功能,style-loader將所有的計算後的樣式加入頁面中，二者組合在一起使你能夠把樣式表嵌入webpack打包後的JS檔案中。

2. css-loader 和 style-loader

安裝

npm install --save-dev style-loader css-loader
複製程式碼

配置

module.exports = {
  entry: __dirname + "/app/main.js",//已多次提及的唯一入口檔案
  output: {
      path: __dirname + "/public",//打包後的檔案存放的地方
      filename: "bundle.js"//打包後輸出檔案的檔名
  },
  devtool: 'eval-source-map',
  devServer: {
      contentBase: "./public",//本地伺服器所載入的頁面所在的目錄
      historyApiFallback: true,//不跳轉
      inline: true//實時重新整理
  },
  module: {
      rules: [
          {
              test: /(\.jsx|\.js)$/,
              use: {
                  loader: "babel-loader",
                  options: {
                      presets: [
                          "env"
                      ]
                  }
              },
              exclude: /node_modules/
          },
          {
            test: /\.css$/,
            use: [
                {
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }
            ]
          }
      ]
  }
};
複製程式碼

使用

// app/main.css
html {
  box-sizing: border-box;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, p, ul {
  margin: 0;
  padding: 0;
}
複製程式碼

我們這裡例子中用到的webpack只有單一的入口，其它的模組需要通過 import, require, url等與入口檔案建立其關聯，為了讓webpack能找到”main.css“檔案，我們把它匯入”main.js “中，如下

//main.js
import Greeter from './Greeter';
import './main.css';//使用require匯入css檔案
複製程式碼

五、使用CSS module

1. CSS module

所有的類名，動畫名預設都只作用於當前模組

2. 安裝

配置

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, // 指定啟用css modules
                            localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的類名格式
                        }
                    }
                ]
            }
        ]
    }
};
複製程式碼

五、使用CSS前處理器

1. 使用CSS前處理器

Sass 和 Less 之類的前處理器是對原生CSS的擴充，它們允許你使用類似於variables, nesting, mixins,inheritance等不存在於CSS中的特性來寫CSS。 postcss-loader 和 autoprefixer（自動新增字首的外掛）

2. 安裝

npm install --save-dev postcss-loader autoprefixer
複製程式碼
//webpack.config.js
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"
                    }
                ]
            }
        ]
    }
}
複製程式碼
// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}
複製程式碼

相關文章