webpack

1.webpack安装与使用

在webpack 4.x 版本后面需要安装 webpack跟webpack-cli npm install -D webpack webpack-cli
查看webpack 版本是 npx webpack -v 因为webpack一般推荐局部安装，最好不要全局安装，不是全局安装的话，使用webpack -v会报错，需要使用npx来调用webpack
使用默认的webpack打包： 将代码文件放入src目录中 执行 npx webpack 会将src里的文件打包进dist目录中主入口文件index.js，会打包成main.js
使用webpack.config.js进行配置打包：
1.单入口

//webpack 是基于nodeJS的
const path = require('path')
module.exports = {
   //项目打包的相对路径
   // context:process.cwd()
   //入口 项目入口 支持字符串,数组,对象
   // entry:'./src/index.js',
   // 意思 将index.js 和 other.js 同时打包到main.js中
    entry:['./src/index.js','./src/other.js'],
   //出口
   output:{
       //生成文件路径,一定要用绝对路径
       path:path.resolve(__dirname,"./dist"),
       //生成的文件名字
       filename:'main.js'
   }
}

2.打包成多入口多出口
filename中的占位符 无论是多出口还是单出口都推荐使用
入口使用对象形式 占位符会使用k值代替，其他方式，占位符默认main

//webpack 是基于nodeJS的
const path = require('path')
module.exports = {
        //多入口 写成对象形式 k-v
    entry:{
        index:'./src/index.js',
        other:'./src/other.js'
    },
    //出口
    output:{
        //生成文件路径,一定要用绝对路径
        path:path.resolve(__dirname,"./dist"),
        //生成的文件名字 使用占位符代替文件名字
        filename:'[name].js'
    }
}

3.构建模式
设置mode属性 有 none production development
当mode 的值为none 会默认使用production 生成模式 会将文件打包压缩
当mode 的值为devlopment是 会使用开发方式将文件打包，不压缩，有注释

2.loader的使用 模块转化

因为webpack默认只支持 .json 和 .js 模块，不支持，不认识其他格式的模块，所以需要用到loader进行转化。
例如使用css文件

    module:{
        rules:[
            {
                test:/\.css$/,
                use: ["style-loader","css-loader"] ,//优先使用css-loader转化 再用style-loade
                //style-loader 会创建style标签 将css-loader 转化的文件 放进style标签里面
            }
        ]
    }

4.插件的使用 (这个机制原理是作用于webpack整个打包周期的)

1.下载插件 例如 npm install clean-webpack-plugin -D
2.引用插件 const {CleanWebpackPlugin} = require('clean-webpack-plugin')
3.使用插件 plugins:[ new CleanWebpackPlugin() ]