vuecli 基于 與webpack的關系

為什么要打包？

互聯(lián)網項目盡量減少加載時間，提高用戶體驗，需要打包
-打包：文件壓縮

什么是webpack?

-打包工具 還有gulp grant
-通過mian.js 將 js css *.vue文件裝載入 webpack 生成css js html 壓縮、混淆、合并 然后輸出dist 常用的裝載器

npm init -y 生成package.json
npm i -S webpack webpack-cli
npx webpack 開始打包
webpack 默認打包文件 webpack.config.js

webpack-dev-server

-前端文件當做一個http 容器訪問
npm i -S webpack-dev-server
npx webpack-dev-server 啟動服務

let path =require('path') //path來自node
let HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={ //node模塊化的寫法
    entry:'./src/main.js', //入口文件
    mode:"development",//開發(fā) 發(fā)布production
    output:{                //出口文件
        filename:'main.js',
        path:path.resolve(__dirname,"dist")        
    },
    devServer:{//web服務配置
        port:8081,
        open:true,//服務打開時自動打開瀏覽器
        progress:true,
        contentBase:'./dist' //http容器的根目錄
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'index.html'
        })
    ]
}

把打包后的js添加在html中

plugins--------安裝 npm i -D html-webpack-plugin
將打包后的js 是自動添加到html

多個文件js

在入口js中
let a=require("./a.js")

項目發(fā)布啟動打包的dist

npm i -g server 安裝
server dist

CSS打包

寫在入口文件main.js,因為 webpack是以js為基礎
require(index.css)
webpack默認不支持css打包，若要支持需要css-loader
npm i -S css-loader
-css 只是裝載css，不會放在HTML
-style-loader 作用是放在html

loader執(zhí)行循序從右向左

-loader裝載器，裝載并轉換（css,vue,less,scss,）
-plugin，文件的處理（壓縮，混淆，合并等）

less less-loader 裝載less并轉換css

npm i -S less less-loader

 module:{
        rules:[
            {
                test:/\.css$/,//以css結尾
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            }
        ]
    },

css 文件壓縮

mini-css-extract-plugin 抽取文件

js 、css壓縮處理

js 壓縮插件 terser-webpack-plugin
css壓縮 optimize-css-assets-webpack-plugin

let MiniCssExtractPlugin=require('mini-css-extract-plugin')
let TerserPlugin=require('terser-webpack-plugin')
let OptimizeCssPlugin=require('optimize-css-assets-webpack-plugin')

optimization:{//壓縮js,css
        minimizer:[new TerserPlugin({}),new OptimizeCssPlugin({})]
    },
module:{
        rules:[
            {
                test:/\.css$/,//以css結尾
                use:[MiniCssExtractPlugin.loader,'css-loader']
            },
            {
                test:/\.less$/,
                use:[MiniCssExtractPlugin.loader,'css-loader','less-loader']
            }
        ]
    },
 plugins:[
        new HtmlWebpackPlugin({//html
            template:'./src/index.html',
            filename:'index.html'
        }),
        new MiniCssExtractPlugin({//css
            filename:"index.css"
        })
    ]

版本過高如何降低版本 npm i -S terser-webpack-plugin@2

刪除依賴包 rm -rf node_modules\

es6打包支持

babel-loader 轉換器(es6\es7)
node支持部分es6

npm i -S babel-loader @babel/core

全局變量

jquery $ 遍歷dom
工具：underscord lodash(防抖節(jié)流)
在每一個組建中都可以使用它

main.js中導入 import $ from 'jquery'（可以去掉）
npm i -S jquery

使用全局變量，可以在組建中使用wepack.providePlugin （導入全部局變量）

導入后由于三方包過大，需要把三方包排出去

三方包拆開好處：1、分開加載 2、緩存

圖片的處理

file-loader (默認使用Es6的模塊化，通過配置esModule:false 禁止默認)
js中使用圖片
css中使用圖片

html中使用圖片 需要 html-withimg-loader

把小圖片轉化成base64 , url-loader [ base64會讓圖片變大，一般轉為小圖片 ]

 {
                test: /\.(png|jpg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        esModule: false,
                        limit: 200*1024 //小于800kb圖片都轉成base64
                    }
                }
                // use: {
                //     loader: 'file-loader',
                //     options: {
                //         esModule: false
                //     }
                // }
            },

模塊化

node commonjs
es6 模塊化 有個default

樣式的兼容性問題

樣式兼容性插件就是給樣式自動添加前綴
postcss-loader

 {
                test:/\.css$/,//以css結尾
                use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']
            },
            {
                test:/\.less$/,
                use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader','less-loader']
            },

在根目錄添加postcss.config.js 需要一個 autoprefixer

module.exports={
    plugins:[
        require('autoprefixer')
    ]
}

還需要在package.json添加[瀏覽器列表]

"browserslist":[
    "> 1%",
    "last 100 versions", //表示瀏覽器的版本號
    "not ie<=8"
  ]