webpack使用文档

webpack

• 中文文档
• 配置文件: webpack.config.js
• 基础插件:
  • html-webpack-plugin,
  • file-loader
• 引入模块: path
  • const {resolve} = require(‘path’);
  • const HtmlWebpackPlugin = require(‘html-webpack-plugin’)

webpack 5个核心 概念

entry:’’,

entry: './src/index.js'

入口 指示webpack 以哪个文件作为入口起点开始打包,分析构建内部的依赖图
单入口 : 使用string 打包一个chunk 输出 一个bundle
多入口 数组 : [ “./src/a.js”,"./src/b.js"] 所有入口打包成一个chunk
多入口 对象 :

{
one:’./src/a.js’, //这还有一种特殊用法 one:["",""] 把数组里的打包成一个
two:’./src/b.js’
}

有几个入口文件就会生成 几个chunk 并输出 几个bundle chunk的名称是key output里的 filename :’[name].js’ 来获取

output:{},

output:{
    filename:"builde.js",
    path:resolve(__dirname,'build')
},

输出指示webpack 打包后的资源bundles 输出到哪里,以及命名

module:{},

module:{
    rules:[
        //打包css资源  先要去入口文件中导入
        // require('./style.css') ==>index.js
        { 
            test:/\.css$/,
            use:[
                //注意执行顺序是 从右往左.从下到上
                'style-loader',
                //如果要引入MiniCssExtractPlugin插件 把css提取出来 需要把style-loader 替换成这个插件 的实例
                'MiniCssExtractPlugin.loader',//使用了这个必须把上面的style-loader 注释掉只能存在一个
                'css-loader',
                //添加一个兼容性插件需要在css-loader下面检查 需要先导入一个插件包  postcss-preset-env
                'post-loader',

            ]
        },
        // 打包Less 资源 先要去入口文件导入
        {
            test:/\.less$/,
            use:[
                'style-loader',
                'css-loader',
                'less-loader',
            ],
        },
        //打包图片
        {
            test:/\.(jpg|png|gif)$/,
            use:[
                {
                    loader:'url-loader',
                    options:{
                        //指定打包后的图片的位置
                        outputPath:'images',
                        //指定所有图片 添加 前面路径.
                        publicPath: './images/',
                        // 设置8k的文件打包成base64位
                        limit:1024*8,
                        //设置名称 hash 前10位 如果想用原名则 {**name : '[name].[ext]'** }也可以拼接**name:'[name][hash:10].[ext]'**这样也是可以的.
                        name:'[hash:10].[ext]',

                    },
                },
                {
                    loader:'file-loader',
                    options:{

                    }
                }
            ]
        },

        {
            //图片在文档中的就必须要这个来处理,所以打包图片需要这两个检测 .
            test:/\.html$/,
            loader:'html-loader',
        }
    ]
}

需要处理的资源
css ==>{css-loader,style-loader}
less ==>{less-loader,css-loader,style-loader}
图片 ==> {url-loader,file-loader,html-loader}

plugins:[],

plugins:[
    // 需要先安装插件 html-webpack-plugin 再在文件前引入 
    //打包一个html文件就需要new 一个实例出来.
    new HtmlWebpackPlugin(
        {
        //指定模板文件
        template : './src/index.html',
        //设置输出文件的名字
        filename : "demo.html",
        //打包多个文件时某个文件需要添加某些js就可以在这里指定 
        chunks:['one','two']
        //压缩空格,注释
        minify:{
            //移除空格 
            collapseWhitespace:true,
            //移除注释
            removeComments:true,
        }
        }
    ),

    //使用MiniCssExtractPlugin插件 :
    {
        //还是需要先导入
        new MiniCssExtractPlugin(
            {
                //这里可以指定导出来的文件名称
                filename : 'demo.css',
                
            }
        ),
    },

    // optimize-css-assets-webpack-plugin 直接默认就好不需要去添加 其它选项 
    {
        new OptimizeCssAsssetsWebapckPlugin(),
    }

    {

    }
],

插件
常用插件:

{
html-webpack-plugins // 打包压缩html文件
mini-css-extract-plugin // 提取css为单独的文件
post-loader / postcss-preset-env //CSS兼容性插件
optimize-css-assets-webpack-plugin // 压缩CSS插件
},

mode

mode:'development',

开发模式(development)
生产模式(production)

---

---

其它问题

一些没有归类 的问题

css的兼容性

兼容性插件需要安装在css-loader 后边 先让这些插件修改兼容问题 然后再转给css-loader处理.
新版需要写:postcss.config.js

• post-loader //这个是转义器
• postcss-preset-env // 这是插件 插件 会自动去寻找 post-loader
  // 需要去修改package.json文件添加browserslist
  “browserslist”: [
  “> 0.2%”,
  “last 2 versions”,
  “not dead”,
  ]

压缩css

• optimize-css-assets-webpack-plugin

配置文件入口

module.exports = {

    const {resolve} = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');

    //入口
    entry: {
        one : './src/a.js',
        two : './src/b.js'
    },
    output:{
        output:{
        filename:"[name].js",
        path:resolve(__dirname,'build')
    },
    },
    moudle: [

    ],
    plugins:[
        // 需要先安装插件 html-webpack-plugin 再在文件前引入
        new HtmlWebpackPlugin(
            {
            //指定模板文件
            template : './src/index.html',
            //设置输出文件的名字
            filename : "demo.html",
            //压缩空格,注释
            minify:{
                //移除空格 
                collapseWhitespace:true,
                //移除注释
                removeComments:true,
            }
            }
        ),
    ],
    mode:'development',






}