webpack5

一。认识webpack

webpack是模块打包器

二。了解webpack原理和概念

1.树结构：在一个入口文件中引入所有资源，形成所有依赖关系图
2.模块：对于webpack来说，css文件，img，都是模块
3.chunk：打包过程中被操作的模块文件就是一个chunk。
4.bundel：bundel是最后打包的文件

三。webpack安装和体验

1.创建目录my-webpack
2.npm初始化操作，npm init -y
3.安装webpack，webpack-cli
4.webpack运行

四。webpack的5个核心概念

1.entry：指定入口文件
2.output：输出webpack打包后的位置及名字
3.loader：编译成webpack可识别的语言
4.plugins：插件
5.mode：模式，分为开发模式development和生产模式production

五。webpack初应用

const { resolve } = require('path');//借助node
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin插件（html打包插件）
module.exports = {
    //1.entry 指定入口打包文件
    entry: './src/index.js',
    //2.output 指定打包目录以及命名
    output: {
        filename: 'build.js',
        path: resolve(__dirname, 'build')
    },
    //3.loader 编译成webpack可识别的文件，css，img
    module: {
        rules: [{test:/\.css$/,use:['style-loader','css-loader']}],//use中，从右向左执行
        {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
    },
    //4.plugins 插件
    plugins: [
        //生成一个空的html，自动引入打包后的js和css
        new HtmlWebpackPlugin({
            filename: "demo.html",//指定文件名
            template: './src/index.html',//指定模板
            //压缩html代码
            minify: {
                //移除空格
                collapseWhitespace: true,
                //移除注释
                removeComments: true
            }
        })
    ],
    mode: 'production',//生产模式
}

webpack打包html

*安装html-webpack-plugin插件
1.插件会生成一个空的html，并自动引入css和js

webpack打包css资源

* 需要使用npm下载安装两个loader完成打包
1.css-loader 的作用是处理css中的@import 和 url 这样的外部资源
2.style-loader 的作用是把样式插入到DOM中，方法是在head中插入一个style标签，并把样式写入这个标签的innerHTML中
# npm install css-loader style-loader -D

webpack打包less和sass资源

1.Sass和Less都属于CSS预处理器，
2.Less需要npm下载less包和less-loader
3.Sass需要npm下载node-sass和sass-loader