webpack基本用法

最新推荐文章于 2021-05-17 23:28:32 发布

小刘讲码德

最新推荐文章于 2021-05-17 23:28:32 发布

阅读量107

点赞数

分类专栏： webpack 文章标签： webpack 图片打包 css打包

本文链接：https://blog.csdn.net/qq_38799074/article/details/103241710

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

代码代码详见https://github.com/liuyingjie1130/webpack

一、什么是webpack:

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。

二、基本概念：

1.mode模式：development,production
2.入口entry：指示webpack应该使用哪个模块来作为构建其内部依赖图的开始
3.出口output：在哪里输出她所创建的bundles，以及如何命名这些文件
4.loader ：让webpack能够去处理那些非JavaScript文件（webpack自身只能理解JavaScript）。loader可以将所有类型的文件转为webpack能够处理的有效模块
5.插件plugins: 打包优化和压缩，重新定义环境中的变量

三、新建项目：

新建文件夹pracitce，进入文件夹npm init，

四、安装webpack:

npm install webpack webpack-cli -D

五、基本使用：

1.创建src文件夹新建index.js

 import './index.css';
    import pic from '../assert/imgs/img.gif';
    (function test(){
        var div=document.createElement('div');
        div.innerHTML='向前冲!';
        var img=new Image();
        img.src=pic;
        document.body.append(div);
        document.body.append(img);//js中添加图片
    })()

新建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="test">嘻嘻嘻</div>
</body>
</html>

新建css文件

.test{
        background:blueviolet
    }

2.创建webpack.config.js


```javascript
 const path=require('path');
    const HtmlWebpackPlugin=require('html-webpack-plugin');//打包自动生成HTML
    const miniCssExtractPlugin=require('mini-css-extract-plugin')
    const {CleanWebpackPlugin} = require('clean-webpack-plugin');//用于删除/清理您的构建文件夹,（有些文件打包几次就生成几个，不需要）
    module.exports={
        mode:'development',
        entry:'./src/index.js',
        
        //多个入口文件  对应多个出口文件
        //entry:{
        	//index:'./src/index.js',
        	//other:"./src/other.js"
    	//},
        output:{
            path:path.resolve(__dirname,'./dist'),//出口在哪
            filename:'index.js'//出口文件名
            //filename:'[name].js'//多个出口文件这样写，name就自动识别入口文件名
        },
        module:{
            rules:[
                {
                    test:/\.css$/,
                    // use:['style-loader','css-loader']//以下方式也妥妥的，顺序不能变！！！
                    // use:[
                    //     'style-loader',
                    //     {
                    //         loader:'css-loader',
                    //         options:{
                    //             sourceMap:true//可以控制台看出样式来自哪个文件方便调试
                    //         }
                    //     }
                    // ]
                    use:[
                        miniCssExtractPlugin.loader,//单独打包css就不能用style-loader了，用此替换
                        {loader:'css-loader',options:{sourceMap:true}}
                    ]
                },
                //图片打包
                {
                    test:/\.(png|jpg|gif)$/,
                    use:['file-loader']//图片打包
                },
                //url-loader要比file-loader  更强大
                {
                test:/\.(gif|png|jpe?g|svg)$/i,
                use:[
                {
                    loader:'url-loader',
                    options:{
                        // publicPath:'www.baidu.com',//可以设置图片路由连接
                        outputPath:'assets',//打包到dist下指定的目录
                        limit:1000// 图片小于这个数会换成base64流，优化性能
                    }
                },
                {
                    loader: 'image-webpack-loader',//压缩优化图片
                    options: {
                      mozjpeg: {
                        progressive: true,
                        quality: 65
                      },
                      optipng: {
                        enabled: false,
                      },
                      pngquant: {
                        quality: [0.65, 0.90],
                        speed: 4
                      },
                      gifsicle: {
                        interlaced: false,
                      },
                    }
                  },

            ]
            },
                
                //字体打包
                {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [{
                  loader:'file-loader',
                  options:{
                    outputPath:"font"//图片打包在dist里的目录
                  }
                }
                ]
              }
                
            ]
        },
        plugins:[
            new HtmlWebpackPlugin({template:'./src/index.html'}),//打包自动生成html
            new miniCssExtractPlugin({
                filename:'main.css'
            })
            
            //有多个出口文件的时候，要写多个自动生成HTML文件的plugin
            new HtmlWebpackPlugin({
            title: 'AICODER 全栈线下实习', // 默认值：Webpack App
            filename: 'index.html', // 默认值： 'index.html'
            template: path.resolve(__dirname, 'src/index.html'),//有自己的写的HTML会合自动生成的HTML合并
            minify: {
              collapseWhitespace: true,//合并空行
              removeComments: true,//清除注释
              removeAttributeQuotes: true // 移除属性的引号
            },
            chunks:['index','other']//自动生成的HTML文件要引用哪个js文件
          }),
          new HtmlWebpackPlugin({
            title: 'AICODER 全栈线下实习', // 默认值：Webpack App
            filename: 'other.html', // 默认值： 'index.html'
            // template: path.resolve(__dirname, 'src/index.html'),
            minify: {
              collapseWhitespace: true,//合并空行
              removeComments: true,//清除注释
              removeAttributeQuotes: true // 移除属性的引号
            },
            chunks:['other']
          }),
          
          //用于删除/清理您的构建文件夹,（有些文件打包几次就生成几个，不需要）
          new CleanWebpackPlugin()
        ]
    }