階段1-第二章-webpack-基礎(一)

webpack主要功能

• 代碼轉譯
• 模塊合併
• 混淆壓縮
• 代碼分割
• 自動刷新
• 代碼校驗
• 自動部署

項目中使用webpack

1.webpack 全局安裝
npm i webpack webapck-cli -g
2.項目安裝
npm i webpack webpack -cli -D
webpack
3 0配置打包 npx webpack

// commonJS 導出
module.exports={
name:'aaa'
}
// es6導出：
export default {
name:'aaa'
}

2.
 // --config 來指定配置文件，開發和上線不一樣的配置文件
npx webpack --config webpack.custom.config.js


在pacakge.json 裏面的script 來指定webpack 打包的配置文件
"scripts":{  //npm run build  
    "buildcustom":"webpack --config webpack.custom.config.js"，
    "build":"webpack "，
    "watch":"webpack --watch"，
    "dev":"webpack-dev-server --contentBase src"
    }

3.開發時自動編譯工具：
//  在webpack --watch
1.webpack's Watch Mode 監視模式,監視文件改變，自動打包生成輸出文件
// webpack-dev-server 依賴webapck
2.npm i webpack-dev-server 
 //在index.html引入bundle.js
3.運行：
 npx webpack-dev-server
 原理：webpack-dev-server 會在本地起一個express服務，在內存裏生成一個bundle.js，
 在根目錄裏面有個bundles.js
  參數：
   --compress   開啓壓縮 是express的http服務的技術
  --contentBase ./src  指定webpack-dev-serever 的express的根目錄 入口爲src
  --hot  指定爲熱加載，hot module replacement  簡稱：hmr熱模塊更替
  --port 5000  指定端口
  --open  自動打開瀏覽器

HMR: 熱模塊更替若是是在指令中不用添加，若是是在配置文件中使用是得安裝
  webpack.HotModuleReplacementPlugin 插件，最新的webpak和webpack-cli不用手動安裝了，自帶了

2.3.3: html插件

html-webpack-plugin

1.devServer時，根據模板自動在express項目根目錄下生成html（相似devServer生成內存中的bundle.js）
2.devServer時，自動引入bundle.js
3.打包是自動生成index.html

2.3.4 webpack-dev-middleware

簡稱：    webpack-dev-server      
  webpack-dev-middleware 是一個容器，它能夠將webpack處理後的文件傳遞給一個server。
  webpack-dev-server 在內部使用了它，同時，他能夠做爲一個單獨的包來使用，以便進行更多自定義設置

1.安裝express和webpack-dev-middleware
2.新建server.js
//webpack-dev-server 內部作了這些封裝
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config.js');  //導入webpack配置文件
 const app = express();
 const compiler = webpack('config');
 
 app.use(webpackDevMiddleware(compiler,{
     publicPath:'/'   //將編譯好的代碼放在服務器的根目錄
 }))

app.listen(3000,()=>{
 console.log('http://localhost:3000')
}) 


3.在package.json 配置scripts爲"server": node server.js
4.運行 npm run server
注意：1.若是要使用middleware，必須使用html-webpack-plugin插件，不然html文件沒法爭取的輸出到express服務器的根目錄

2.3.5小結：

只有在開發時才須要自動編譯工具，例如：webpack-dev-server
 項目上線時會直接使用webpack進行打包構建，不須要使用這些自動編譯工具
 自動編譯工具只是爲了提升開發體驗

2.5 處理saas/less

npm i less less-loader  -D
npm i node-sass sass-loader -D

2.6 處理圖片和字體文件

npm i file-loader -D
npm i url-loader -D   url-loader 是基於file-loader,是對file-loader的包裝 要使用url-loader必須安裝file-loader的
url-loader作了處理：爲了不出現重名，作了hash操做，而且都放在根文件下面

2.7 處理js babel-loader 將新語法轉換成老語法，基於webpack

1. npm i babel-loader   @babel/core(核心包)  @babel/preset-env（預設語法包）  webpack -D
2. 若是要支持更高級的ES6語法，能夠繼續安裝插件：
   npm i @babel/plugin-proposal-class-properties -D
更多插件在Babel 官網查詢

3.排除js
 exclude: /node_modules/

4
更高級的用法：generator  語法轉換
  npm i   @babel/plugin-transform-runtime  --save-dev   開發依賴
  npm i @babel/runtime  --save  運行時依賴（開發上線都要用到的依賴）

setTimeout(funciton(){
    //若是是function內部，this直接指向window
    console.log('1s後我執行了')
},1000)

setIntervel(()=>{
    console.log('我是使用了箭頭函數的setTimeout')
})

// es6 class 關鍵字  是原型的語法糖
class Person {
    this.name = name;
}
let xx = new Person('wang') 


  .babelrc(recommended);是一個json格式的配置,項目根目錄下面建立.babelrc

{
    
                     "presets":["@babel/env"],
                     "plugins":[
                     "@babel/plugin-proposal-class-properties"，
                     "@babel/plugin-transform-runtime"
                     ]
}

@babel/polyfill 將es6轉換es5

js是一門動態語言，在代碼執行時能夠隨時爲對象添加屬性或方法
babel 在看到對象調用方法時，默認不會進行轉換
像includes() 這樣的新方法就不會轉換
@babel/polyfill   es6新方法轉換
npm i @babel/polyfill  --save
使用：
在main.js中使用
import '@babel/polyfill'


在webpack中使用：
module.exports = {
    entry:['@babel/polyfill',"./app/js"]
}

sourceMap 提升調試效率

sourceMap 原理是額外生成映射文件
eval  推薦使用；能夠大幅提升持續構建的效率； 帶eval 不會額外生成映射文件，在eval函數裏面實現；在代碼內部實現定位源代碼
cheap 模式能夠大幅提升source map生成的效率；開銷比較小
使用module 能夠支持babel 這種預編譯工具，映射轉換前的代碼
eval-source-map  能夠減小網絡請求；這種模式開啓DataUrl 自己包含sourcemap信息，並不須要像sourceUrl那樣，瀏覽器須要發送一個完整的網絡請求去獲取sourcemap文件，這會略微提升點效率；而生產環境中則不宜使用eval，這樣會讓文件變得很大
開發環境推薦：
cheap-module-eval-source-map   推薦使用的一種模式
生產環境：
不使用sourcemap
devtools:'cheap-module-eval-source-map'   
生成後的文件 ：是babel轉譯後生成的一個一個的js文件
打包後的文件： 是webpack 將因此的js放到一個js文件放到一個文件

webpack 插件使用：

1.安裝 
2.require引入 
3.在plugins中new這個插件的構造函數

clean-webpack-plugin

在npm run build 會自動清除dist目錄

copy-webpack-plugin

能夠拷貝多個源
使用插件，在pugins中插件對象並配置源和目標
from: 源，從哪裏拷貝，能夠是相對路徑，能夠是絕對路徑，推薦絕對路徑；
to: 目標，拷貝到哪裏去，相對於output的輸出路徑，一樣可使用相對路徑或絕對路徑，但更推薦相對路徑（直接算相對dist目錄便可）
若是是圖片，路徑用絕對路徑，/開頭

bannerPlugin

這是一個webpack內置插件，用於給打包的js加上版權註釋信息,爲每一個chunk文件頭部添加banner;

上面插件用到的webpack配置

1.  入口：
const CleanWebpackPlugin = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
module.exports={
 entry: './src/main.js',
 output:{
//必須爲絕對路徑
//path.resolve() 解析當前路徑的絕對路徑
// path.join(__dirname,'./dist/')
path: path.resolve("./dist/"),
filename: 'bundle.js'
},
  mode:'development'  //不設置默認爲production ,
//  watch: true,   //開啓監視模式，自動編譯，生成輸出文件
devServer:{
    open: true,
    port: 5000,
    hot: ture,
    compress: true,
    contentBase: '/src',   
    },
 plugins:[
 //插件通常引入進來是個構造函數
 //根據模板'/src/indtx.html'生成文件'index.html'
     new HtmlWebpackPlugin({
         filename:'index',
         template:'./src/index.html'
     }),
     new CleanWebpackPlugin(),
     new CopyWebpackPlugin([{
         from: path.join(__dirname,'assets'),
         to:'assets'
     },
     {
         from: path.join(__dirname,'image'),
         to:'image'
     }
     ]),
     new webpack.BannerPlugin('能夠爲每一個chunk文件頭部添加banner')

 ],
 module:{
     rules:[
         {
             test:/\.css$/,
             // webapck 讀取loader時 是從左到右讀取，會將css文件先交給最右側的loader
             // loader的執行順序是從右到左以管道的方式鏈式調用
             // css-loader：解析css，使其支持css語法格式
             // style-loader: 將解析出來的結果放到 html中，使其生效
             use:['style-loader','css-loader']
         }，
         {
             test:/\.less$/,
             //less-loader 只是將less文件轉成css語法
             use:['style-loader','css-loader','less-loader']
         },
         {
             test:/\.s(a|c)ss$/,
             use:['style-loader','css-loader','sass-loader']
         },
         {
             test:/\.jpg|jpeg|png|gif|bmp$/,
             use:['file-loader']
         },
         {
             test:/\.(woff|woff2|eot|svg|ttf)$/,
             use:['file-loader']
         },
         {
             test:/\.(jpg|jpeg|png|gif|bmp)$/,
             use:{
                 loader:'url-loader',
                 options:{
      /* url-loader功能*/  limit:5*1024，   //5kb  若是圖片大小  小於5kb直接轉成base64
        /* file-loader功能*/  outputPath:'images',
       /* file-loader功能*/  name:[name]-aaa[hash:4].[ext]  //ext擴展名 -中間能夠加常量,hash:4 保留4位hash值
                 }
             }
         }，
         {
             test:/\.js$/,
             use:{
                 loader:'babel-loader'，
                 options:[
                     presets:['@babel/env'],
                     plugins:[
                     '@babel/plugin-proposal-class-properties'，
                     '@babel/plugin-transform-runtime'
                     ]
                 ]
             },
             exclude:/node_modules/
         }
     ]
 },
 devtool:'cheap-module-eval-source-map'   
}