各位看官git上求個星星！ 我有趣的前端筆記！！（webpack，babel，typescript，手撕排序演算法等持續更新中！！）

一、初步搭建

1、初始化package.json

yarn init -y
npm init -y

npm會比yarn多scripts 物件

作用：便捷指令

//package.json
{
  "name": "demo1",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    //"test": "echo \"Error: no test specified\" && exit 1"			//初始化生成
    "build": "webpack"																					//webpack命令
  },
  "keywords": [],
  "author": "",
  "description": ""
}
 

2、安裝webpack

使用開發者依賴即可

yarn add -D webpack webpack-cli

3、初步實現配置

0、根目錄下 建立webpack.config.js

1、實現打包檔案 自動生成html 並會在html中匯入

• 安裝 html-webpack-plugin 包
• webpack.config.js 匯入包+plugins新建例項

2、入口檔案設定輸出

• 利用entry設定檔案對應打包後的檔名

entry:{
  index:'./src/index.js',
  home:'./src/home.js',
  page:'./src/page.js'
}

• 利用output重構打包後的檔名

//會重新構成打包後的檔名
//[name] 對應上面entry的key值
//[hash] 隨機生成的hash值 :8 是剪下前6位
output:{
	filename:'[name].[hash:8].js',
    
  //path控制輸出資料夾的名字 [預設dist]
  path:path.join(__dirname,'release')			//前提匯入path模組 需要用絕對路徑!!
},

const path = require('path')
const HtmlWebpack = require('html-webpack-plugin')
module.exports = {
  //1.編譯打包模式[production/development]
  mode: 'development',
  //2.入口檔案設定{換而言之=>要打包的檔案} //多入口寫法
  entry: {
    index: './src/index.js',
    home: './src/home.js',
    page: './src/page.js'
  },
  //3.出口檔案設定{對打包好的檔案格式化檔名+修改出口資料夾}
  output: {
    filename: '[name].[hash:8].js',
    path:path.join(__dirname,'release')
  },
  //4.外掛設定=>具體看文件 此處用到自動生成html
  //html中自動匯入打包好的js
  //其中的template指向預定好的模板
  plugins: [
    new HtmlWebpack({
      template:'./src/index.html'
    })
  ]
}
 

二、進階之loaders篇

1、樣式

• style-loader 將模組的匯出作為樣式新增到 DOM 中

• css-loader 解析 CSS 檔案後，使用 import 載入，並且返回 CSS 程式碼

• less-loader 載入和轉譯 LESS 檔案

• sass-loader 載入和轉譯 SASS/SCSS 檔案

在module中新增規則

module:{
  rules:[
    {
      test:/\.(css|less|scss)$/,
      use:['style-loader','css-loader','less-loader']
    }
  ]
},

注意：要使用 less-loader需要先安裝 less-loader和 less

補充：設定全域性的顏色less，可在其他地方引用 @import xxx

//base.less
@primary-color:#ccc;
@background-color:#000;

//index.less
@import './base.less';
.haha{
  color: @primary-color;
  background-color:@background-color
}

2、如何build出對應的樣式檔案

需要安裝對應外掛從 bundle 中提取文字（CSS）到單獨的檔案

npm install --save-dev extract-text-webpack-plugin

將webpack.config.js的module修改一下

• 1、通過require引入該庫
• 2、先在plugins中註冊一份ExtractTextPlugin
• 3、將rules中每一項設定一個use

//1.引入該庫
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports={
  //...省略程式碼...
  
  //2.在plugins中註冊一份ExtractTextPlugin
  plugins: [
     new ExtractTextPlugin("style.css")
  ],
  module:{
    //3.將rules中每一項設定一個use 
    //通過ExtractTextPlugin的extract-api 去指定loader
      rules:[
        {
          test:/\.css$/,
          use:ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader'
          })
        },
        {
          test:/\.less$/,
          // use:['style-loader','css-loader','less-loader']
          use:ExtractTextPlugin.extract({
            fallback: 'style-loader',
            //如果需要，可以在 sass-loader 之前將 resolve-url-loader 連結進來
            use: ['css-loader','less-loader']
          })
        }
      ]
   }
}

補充 ：可能會報錯DeprecationWarning: Tapable.plugin is deprecated. Use new API on '.hooks' instead

此處只需將版本更新即可 npm install extract-text-webpack-plugin@next

3、webpack轉換typescript

1、常規轉換typescript方式

• 通過全域性安裝 tsc
• 在通過tsc編譯ts檔案 此時會在ts資料夾下 生成轉換後的js檔案

//全域性安裝 tsc
npm install -g tsc
//tsc編譯
tsc xxx.ts

2、webpack方式轉換typescript

• 安裝ts-loader 和 typescript

yarn add -D ts-loader typescript

• 修改webpack.config.js檔案下的module

  module:{
    rules:[
      {
        test:/\.ts$/,
        loader:'ts-loader'
      }
    ]
  }

• 新增一個 在根目錄下tsconfig.json 檔案 【固定寫死】

{
  "compilerOptions": {
    "sourceMap": true
  }
}

三、進階之 熱部署

1、 概念：

它允許在執行開發時更新各種模組，而無需進行完全重新整理。

換而言之：修改js，vue儲存後，即可自動編譯+重新整理頁面 無需重新手動編譯

2、熱部署方式（1）

• 引入 webpack const webpack = require('webpack');
• 增加devServer項 【固定！】
• plugins加入外掛 new webpack.HotModuleReplacementPlugin()

    const HtmlWebpack = require('html-webpack-plugin')
+		const webpack = require('webpack');
    module.exports = {
      entry:{
        index:'./src/index.js'
      },
      mode:'development',
+     devServer:{
+       contentBase:'./dist',
+       hot:true
+     },
      plugins:[
+       new webpack.HotModuleReplacementPlugin(),	//需要在上方匯入webpack
        new HtmlWebpack({
          title:'hot module',
          template:"./src/index.html"
        })
      ]
    }

修改package.json 的 指令

• 安裝 熱部署的庫 npm install -D webpack-dev-server
• 在scripts中新增dev指令 即執行 webpack-dev-server

  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  },

注意❌：修改html並不能使用熱部署！！ 因為html並沒有放在webpack.config.js檔案中打包

3、熱部署方式（2）

此處放置通過 Node.js API官網連結 實用起來感覺沒必要（東西太多+我懶~~）

四、開發和生產環境的不同配置方法

1、定義

開發環境：dev

生產環境：build

2、同時配置方法

設定兩個不同的 webpack.prod.config.js 即可 注意 名字不能相同！！！

修改其中的 mode

• 開發環境下的mode =》mode:'development'

• 生產環境下的mode =》mode:'production'

修改package.json的命令入口檔案

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

五、手動配置vue的webpack

1、安裝vue包和對應的loader

npm install -D vue-loader vue vue-template-compiler
npm install -D babel-loader @babel/core

2、配置webpack.config.js

要想在vue中使用 less lang="less"

<style lang="less" scoped>
  .contain{
    font-size: 20px;
    .first{
      color: red;
    }
    .second{
      color: brown;
    }
  }
</style>

需要修改webpack.config.js

//webpack.config.js   
		const HtmlWebpack = require('html-webpack-plugin')					//build生成html
    const webpack = require('webpack')
+   const VueLoaderPlugin = require('vue-loader/lib/plugin')		//vue的loader
    module.exports = {
      mode:'development',
      entry:'./src/index.js',
      //熱部署
      devServer:{
        contentBase:'./dist',
        hot:true
      },
      module: {
        rules: [
+         {
+           test: /\.vue$/,
+           loader: 'vue-loader'
+         },
          // 它會應用到普通的 `.js` 檔案
          // 以及 `.vue` 檔案中的 `<script>` 塊
+         {
+           test: /\.js$/,
+           loader: 'babel-loader'
+         },
          // 它會應用到普通的 `.css` 檔案
          // 以及 `.vue` 檔案中的 `<style>` 塊
          {
+           test: /\.css$/,
+           use: [
+             'vue-style-loader',
+             'css-loader'
+           ]
          }
        ]
      },
      plugins:[
        //vueloader外掛註冊
+       new VueLoaderPlugin(),			
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpack({
          template:'./src/index.html'
        })
      ]
    }

六、手動配置React的webpack

1、安裝react包和對應的loader

注意：babel-loader一定要裝上 @babel/core

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

2、配置webpack.config.js

新增在 module中新增 rules

  module.exports = {
  mode:'development',
  entry:'./src/index.js',
  module:{
+  rules:[
+     {
+       test:/\.(js|jsx)$/,
+       use:[{
+         loader:"babel-loader",
+          options:{
+            presets:[
+              "@babel/preset-react",
+              "@babel/preset-env"
+            ]
+          }
+        }]
+      }]
+  	 }
+  }
	}

七、總結

1、匹配css與less檔案 對應所需的loader

2、兩種匹配寫法（簡單法/可提取css檔案法）

基本寫法

{
        test:/\.css$/,
        use:[
          "style-loader",
          "css-loader"
        ]
      },
      {
        test:/\.less$/,
        use:[
          "style-loader",
          "css-loader",
          "less-loader"
      	]
			}
}

可提取css檔案法

上面已經出現 請按住ctrl 點選檢視