web入门1 6.自动优化。她会自动寻找，node_modules下得.bin 下可执行webpack命令，命令内部会

webapck入门

前端工程化,主要提现在，模块化，组价化，规范化，自动化(自动构建，自动化部署，自动化测试) 代码得打包和构建我们主要使用webpack,rollup,vite

1webpack得作用；

1.代码转化 2.文件优化 3.代码分割 4.模块合并 5.自动刷新， 6.自动优化。

使用webpack得前提安装node,

webpack webpack-cli 安装webpack

npm install xxx-D 开发环境 devDependencies

npm install xxxx 生产环境用的dependencies

npm 0配置运行npx webpack 但是npx 必须是5.2版本以后

这样可以打包默认生产main.js 她会自动寻找，node_modules下得.bin 下可执行webpack命令，命令内部会调用webpack-cli解析用户参数进行打包。

运行方式

在package.json 里得scripts标签里配置

 "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "dev:serve":"webpack-dev-server"
  },

webpack 遵循得是 comomJS的语法规范，而且可以使用node.js 的核心模块

mode是开发环境的配置：development开发环境， production 生产环境配置 __dirname //获取当前文件夹的绝对路径

output:{ //输出文件地方和文件名
path：path.resolve(__dirname,"dist") //打包到dis目录下
filename:"bundles1.js"  // 打包输出文件名
 }

如果把webpack文件名写错，让自己找配置文件的写法：

"scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "test:"webpack --config ./webapck.dev" //寻找webpack.dev 里的webpack.dev 里的配置 
  },

区别wenpack开发环境和生产环境

"scripts": {
    "dev": "webpack --config ./webpack.dev",
    "build": "webpack --config ./webpack.prod"
  },

假如说有公共配置文件，开发文件webpack.dev.js.生产环境文件webpack.prod.js,打包时时可以区别的这时候用env这个变量代码如下区分配置文件；

"scripts": {
  "dev": "webpack --env.development --config ./webpack.dev",
  "build": "webpack --env.production --config ./webpack.prod"
},

生产环境和开发环境合包，需要用 webpack-merge 这个插件

下面时webpack.base.js

const path =require("path") 
console.log(__dirname) // 获取当前文件所在项目的绝对路径
const dev =require("./webpack.dev")
const prod =require("./webpack.prod")
const {merge} =require("webpack-merge")  // 合并webpack 最终返回对象
module.exports=(env)=>{
   let base ={
       mode:'development',
       entry:'./src/index.js',
       output:{
           /* 输出文件地方和文件名 */
           path:path.resolve(__dirname,"dist"), // 打包到dis 目录下
           filename:"bundle1.js"
       }
   }
   if(env.development){
       // base 和开发环境合并
       return merge(base,dev)
   }else{
       // base 和生产环境合并
       return merge(base,prod)
   }
}

介绍webpack两款插件

1.clean-webpack-plugin 用于删除/清理您的构建文件夹。

默认情况下，此插件将output.path在每次成功重建后删除webpack目录中的所有文件以及所有未使用的webpack资产。可以配置打包时删除那些文件。

2.html-webpack-plugin 可以确定打包的静态资源，哪个模块引入哪个js.

包括多入口文件的配置如下。

const path =require("path") 
console.log(__dirname) // 获取当前文件所在项目的绝对路径
const {CleanWebpackPlugin} =require("clean-webpack-plugin")
const HtmlWebpackPlugin =require("html-webpack-plugin") //直接导出

let htmlPlugin=["index","other"].map((chunkName)=>{
   return new HtmlWebpackPlugin({
       template:`./${chunkName}.html`, // 模板资源静态文件
       filename:`${chunkName}.html`,
       inject:'body', //值false 不注入js 文件
       chunksSortMode:'manual',  // 手动配置代码的顺序
       chunks:[chunkName] // 数组里前面可以加先引入 还是后引入的 先引入jquery 在引入js
   })
})

module.exports={
   // entry:'./src/index.js',
   // output:{
   //     /* 输出文件地方和文件名 */
   //     path:path.resolve(__dirname,"dist"), // 打包到dis 目录下
   //     filename:"bundle.js"
      
   // },
   entry:{
       index:"./src/index.js",
       other:"./src/other.js"

   },
   output:{
       path:path.resolve(__dirname,"dist"),
       filename:'[name].js'  //打包后生产不同的文件名直接用变量name 来表示
   },
   devServer:{ /* 打包在内存在中打包 */
       port:999,
       open:true, // 自动打开
       compress:true,// 开启gzip 压缩
       hot:true ,// 自动更新 css 代码，开发环境下 其实css 放在style 标签里
       // contentBase:path.resolve(__dirname,"dist") // 找dist 目录下的 以dis 目录
       //为基准配置一个访问的静态资源
       contentBase:path.resolve(__dirname,"dist") // 已根目录为基准 访问静态资源文件

   },
   plugins:[ // 插件表示提供额外的功能
       new CleanWebpackPlugin(),
      ...htmlPlugin
       // new HtmlWebpackPlugin({  // 这个插件会把静态资源文件拷贝一份在dis 文件夹里输出，再把打包后的js插入到静态html
       //     template:'./index.html',// 模板静态资源文件
       //     filename:"index.html", // home.html 是已index.html 为模板复制的
       //     hash:true, // 这个值清除缓存
       //     minify:{ // 打包后去除一些东西
       //         removeAttributeQuotes:true, //去逗号
       //         collapseWhitespace:true,// 去空格
       //         removeComments:true, // 去注释
       //     },
       //     inject:"body", // 打包的文件 放在html里的哪里
       //     chunks:['index']       // 多入口打包才有的不加打包的文件都引用index.html里面
       // })
       /* 复制一下改成多文件  多个入口文件时写数组 */
   ]
}

webpack配置devServer他是在内存内部打包的。要在scripts 里配置启动项

devServe的配置项如下：

devServer: {
 contentBase: path.join(__dirname, "dist"), // 以根目录为基准访问静态资源文件
 compress: true, //开启gzip ，压缩
 port: 9000,   // 打开端口号
 hot：true,// 自动更新css 代码，开发环境下其实是把css 放在style 标签里面
 proxy: { // 启用代理
 "/api": "http://localhost:3000"
}
 
}

更多详细信息查阅webpack 官网 www.webpackjs.com/configurati…

web入门1