webpack 4.x版本手動配置

• 2020 年 7 月 27 日
• 筆記
• webpack

• 運行 npm init -y 快速初始化項目

• 在項目根目錄創建src源程式碼目錄和dist產品目錄

• 在src目錄下創建 index.html

  • mani.js文件如果後期使用entry打包，這裡可以手動創建

• 使用npm 安裝webpack, 運行npm i webpack/webpack-cli -D

  • 全局運行npm i cnpm -g

• 手動創建webpack.config.js文件

• 注意：webpack4.x 提供了約定大於配置的概念：目的是為了盡量減少配置文件的體積；

  • 默認約定了
  • 打包的入口是src>index.js
  • 打包的輸出文件是 dist>main.js
  • 4.x中新增了mode選項(必選項)，可選值為：development和production;

• 或者在webpack.config.js中配置 entry

   module.exports={
          mode:'development' // development production
          
      }
  

  實時打包模組

• 安裝

•  npm install webpack-dev-server -D
  

• package.json中設置dev

   "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1",
          "dev":"webpack-dev-server"
  

  　　

• 啟動dev運行

  npm run dev

   webpack-dev-server 打包好的main.js是託管到了記憶體中；所以在項目根目錄中看不到；但是我們可以認為，在項目根目錄中，有一個看不見的main.js

• index.js中引入根目錄main.js

  <script src="/main.js"></script>
  

• package.json中設置dev屬性

  • –open 自動打開瀏覽器 後面可以添加 iexplore chrom ….瀏覽器
  • –port 3000 : 執行埠號為3000
  • –hot :
  • –progress :打包進度
  • –compress : 壓縮
  • –host 127.0.0.1 : 執行域名

  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev":"webpack-dev-server --open --port 3000 --hot"
  },

自動打開index.html 首頁模組

• 安裝模組

    npm install html-webpack-plugin -D

• webpack.config.js中配置

 const path=require('path');
  const HtmlWebPackPlugin=require('html-webpack-plugin') // 導入 在記憶體中自動生成index頁面的插件

// 創建一個插件的實例對象
const htmlPlugin=new HtmlWebPackPlugin({
template: path.join(__dirname,'./src/index.html'), // 源文件
 filename:'index.html' // 生成的記憶體中首頁的名稱
})

// 加入模組
module.exports={
    mode:'development',
    plugins:[
    htmlPlugin
    ]
}

將index中<script src=”/main.js”></script>去掉，讓他自己打包執行