Vue学习笔记：3.webpack安装与使用

1.webpack的安装

全局安装webpack、webpack-cli

npm install webpack webpack-cli -g

执行webpack命令，会执行node_modules下的.bin目录下的webpack
webpack在执行时是依赖webpack-cli的，没有安装就会出错
webpack-cli中的代码执行时，才是真正利用webpack进行编译和打包的过程
所以安装webpack时，需要安装webpack-cli(第三方脚手架事实上没有使用webpack-cli，而是自己的service-cli)

局部安装webpack、webpack-cli

在我们使用webpack命令执行打包操作时，默认使用全局的webpack，为了适配不同的项目需求，我们安装不同版本的webpack进行打包

npm install webpack webpack-cli -D

我们使用 -D尾缀来安装开发依赖

2.webpack的使用

需要使用局部安装的webpack进行打包时，可以使用npx

npx webpack

但通常我们会在package.json中配置脚本，比如：

"script":{
    "build":"webpack"
}

此时我们就可以执行脚本进行打包

npm run build

3.webpack的配置

1.创建webpack.config.js

   module: {
   //rules数组
   rules: [
     {
       test: /.css$/,
       //这里的loader顺序很重要，执行顺序为从后往前
       use: [
         'style-loader',
         'css-loader',
         //使用postcss-loader添加不同浏览器前缀
         'postcss-loader'
       ]
     }，
     {
       test:/\.less$/,
       use:[
           "style-loader",
           "css-loader",
           "less-loader"
       ]
    },
    {
       test:/.(jpg|png|jpeg|svg|gif)$/,
       use:[
         "file-loader"
       ]
    } 
   ]
 }

2.常用loader

1.file-loader:配置打包后的文件路径、文件名、添加哈希

module: {
   rules: [
    {
       test:/.(jpg|png|jpeg|svg|gif)$/,
       use:{
           loader:"file-loader",
           options:{
             //文件路径配置：build文件夹下的img文件夹
            outputPath:"img",
            //打包后的文件名：文件名+6位hash+对应后缀名
            name:"[name]_[hash:6].[ext]"
        }
       }
    } 
   ]
 }

2.url-loader：将较小的文件转换成base64的URI 通过base64转换的URI可以随着其他文件的传送附带，减少服务器请求压力

module: {
   rules: [
    {
       test:/.(jpg|png|jpeg|svg|gif)$/,
       use:{
           loader:"url-loader",
           options:{
            outputPath:"img",
            name:"[name]_[hash:6].[ext]",
            //小于100kB的图片，使用base64转换
            limit:100*1024
        }
       }
    } 
   ]
 }

3.从webpack5开始，可以直接使用资源模块类型(asset module type)来代替url-loader、file-loader等loader

asset/resource发送一个单独的文件并导出URL，之间通过file-loader实现 asset：之前通过url-loader实现

{
    test:/.(jpg|png|jpeg|svg|gif)$/,
    type:"asset",
    generator:{
        //文件路径
        filename:"img/[name]_[hash:6][ext]"
    }
    paser:{
        //文件大小限制
        dataUrlCondition:{
            maxSize:100*1024
        }
    }
}

3.常用plugin

plugin可以用来进行打包优化、资源管理、环境变量注入等等 1.CleanWebpackPlugin:每次打包时删除上次的打包文件

npm install clean-webpack-plugin -D

2.HtmlWebpackPlugin:生成一个html，引入打包后的js

3.DefinePlugin:定义一些变量，供全局使用

4.copy-webpack-plugin:实现文件拷贝功能

module.exports = {
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            //提供模板
            template:"./public/index.html",
            title:'哈哈哈'
        }),
        new DefinePlugin({
            BASE_URL:"'./'"
        }),
        new CopyWebpackPlugin({
            patterns:[
                {
                    from:"public,
                    globOptions:{
                        //复制时，忽略index.html文件
                        ignore:[
                            "**/index.html
                        ]
                    }
                }
            ]
        })
    ]
}