2021-04-13 webpack5 基础使用

NPM 包管理器

npm init -y  初始化npm 配置package.json

npm -v   查看版本

npm install- 使用npm命令安装模块

npm list - 查看所有全局安装的模块

npm list vue 查看某个模块的版本号  （红色表示使用时需要填充自己的数据）

npm install -save moduleName   # -save 在package文件的dependencies 节点写入依赖

npm install -save-dev moduleName # -save-dev 在package文件中的devDependencies节点写入依赖

webpack5

webpack是一个模块打包器（构建工具），它的主要目标是将javascript文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（trabsform）、打包（bundle）或包裹（package） 任何资源

了解webpack原理和概念

树结构：在一个入口文件中引入所有资源，形成所有依赖关系树状图

模块：模块就是模块可以是ES6模块也可以使commonJS或者AMD模块，对于webpack来说所有的资源（img,css ...）

chunk:打包过程中被操作的模块文件叫做chunk，列如异步加载一个模块就是一个chunk

bundel:bundel是最后打包后的文件，最终文件可以和chunk长的一模一样，但是绝大部分情况下他是多个chunk的集合

为了优化最后生产出的bundel数量可能不等于chunk的数量，因为有可能多个chunk被组合到一个bundel中

安装webpack及webpack-cli :npm i webpack webpack-cli --save-dev (可以缩写为-D) 

控制台运行命令：webpack --mode development （开发环境）

                             webpack --mode production （生产环境）

 

webpack.config.js基本配置

const path = require('path')

module.exports = {
    entry: "./src/index.js",  //入口起点 默认./src    可以指定多个入口起点

    //output 输出 （output） 指示webpack打包后的资源bundles 输出到哪里，以及如何命名
    output:{
        filename:"build.js",
        path:path.resolve(_dirname, "build"),
    },
    mode:"production" ,// "production" | "development 告诉webpack 是生产环境还是开发环境
    
}

webpack 打包和压缩html资源

1.安装html打包插件: npm i html-webpack-plugin -D

2.在webpack.config.js 中引用插件：const HtmlWebpackPlugin =require('html-webpack-plugin');

webpack 打包多html

//配置webpack.config.js文件

//多个entry
entry:{
    vendor:['jauery','./src/js/common.js'],
    index:'./src/index.js',
    cart:'./src/js/cart.js'
}

//再配置webpack-html-plugin
new HtmlWebpackPlugin({ template: './src/index.html' })

webpack 打包CSS资源

1.安装style-loader，css-loader 插件

2.配置webpack.config.js  

module:{
        //从右到左的顺序
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
              ] 
    },