vuecli 基于与webpack的关系

为什么要打包？

互联网项目尽量减少加载时间，提高用户体验，需要打包
-打包：文件压缩

什么是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",//开发 发布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")

项目发布启动打包的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执行循序从右向左

-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(防抖节流)
在每一个组建中都可以使用它

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"
  ]

打包