1. webpack初步理解

webpack

安装流程

1. npm init -y
2. npm install webpack webpack-cli -d
   1. 安装webpack和webpack脚手架
3. 执行 npx webpack 5.1.2版本以后的webpack
   1. 找的node_modules下的bin的webpack命令
      1. 内部找webpack-cli执行命令
4. 默认入口文件index.js
5. 默认出口文件dist文件
6. package.json
   1. script接口
      1. "dev":"webpack"这个是找node_modules下的bin下的命令
7. npm install html-webpack-plugin 不加-d就是生产环境 加了--d就是开发环境
   1. 卸载: npm uninstall html-webpack-plugin

功能

1. 代码转换
   1. (ts转换js)
   2. less/scss=>css
2. 模块合并
   1. 多个包合并成为一个
3. 文件优化
   1. 压缩html/js
4. 代码分割
   1. 公共区域代码分割
5. 自动刷新
6. 代码校验(单元测试)

核心概念

• 入口
  • 自动找src下的index
• 出口
  • 自动找dist
• loader
  • 代码转化
• plugins
  • 不一样的功能,代码分割等
• webpack.config.js(配置文件)
  • 自己配置webpack的文件,需要创建
  • 遵循nodejs的commonjs规范=>require

常用插件

npmjs.com里面可以找插件

• html-webpack-plugin
  • 让入口文件自动合并到指定的index.html的script的src路径下
• clean-webpack-plugin
  • 每次打包都会把之前的dist下的文件删除
• webpack-dev-server 创建本地服务器,自动重新构建,自动打开浏览器并且刷新

loader

• style-loader 用于解析style
• css-loader 用于解析css
• less-loader 解析less 他们的顺序是less-css-style 是必须的

多入口文件

  // entry:{ // 多个入口文件,把两个js文件放到dist下,并且都集成到html上  //   index:'./src/index2.js',  //   other:'./src/other.js'  // },  // output: {   //   filename: '[name].js',  // 代表上面的index2或者other 也就是一个变量name  //   path: path.resolve(__dirname, "dist") // 路径不变  // },

整体代码及注释

const path = require('path') // 因为出口文件的路径需要是绝对路径,所以是导入nodejs的文件读取功能const {  CleanWebpackPlugin} = require('clean-webpack-plugin') // 这个是每次打包都会娶处理dist文件下的文件const htmlWebpackPlugin = require('html-webpack-plugin')// console.log(__dirname,"path");module.exports = { // 遵循Commonjs规范  entry: './src/index.js', // 这个是入口文件,自己写什么都可以,单个文件 .也可以把公共的工具打包成为一个入口文件,就是多入口文件  output: { // 出口文件    // fileName:'bound.js', // 文件名称    // hash chunkHash 入口文件的hash  contentHash是内容hash值    // filename: 'bundle.[contentHash:8].js', // 文件名称 防止走缓存,每次加一个hash值作为文件名字    filename: 'bundle.js', // 文件名称 防止走缓存,每次加一个hash值作为文件名字    path: path.resolve(__dirname, "dist") // 用path.resolve()就可以把路径解析成为一个绝对路径    // __dirname是Commonjs全局自带的一个值,就是当期文件所在的目录    // dist是输出的文件  },  // entry:{ // 多个入口文件,把两个js文件放到dist下,并且都集成到html上  //   index:'./src/index2.js',  //   other:'./src/other.js'  // },  // output: {   //   filename: '[name].js',  // 代表上面的index2或者other 也就是一个变量name  //   path: path.resolve(__dirname, "dist") // 路径不变  // },  devServer:{   每次更改数据都要从新启动devServer    // 开启本地服务 可自行更新,启动并刷新页面      // 这是本地服务,需要启动,在package.json里的script手动启动      // 所有package.json里的script都是执行node_modules下的bin的cmd代码      // 在内存中打包,所有目录在根目录下    // !! 根目录就是app这个目录,static静态文件其实就是直接寄存在根目录下 端口号7777/a.html的7777/就是根目录    port:7777, // 本地端口号    open:true, // 是否自动打开浏览器    compress:true, // 是否自动压缩代码,但是我们还是会安装插件    contentBase:'static', // 启动一个静态资源文件    hot:true // 热更新 ,加上这个属性,就是页面刷新是实时的  },  plugins: [ // 这里存放的是webpack的插件    // new CleanWebpackPlugin({    //   cleanOnceBeforeBuildPatterns:['cc/*','!cc/a.js'] // 清除cc/所有文件 !但是不包含cc/a.js文件    // })    new CleanWebpackPlugin(), // 每个插件使用都需要new一下 这个插件功能是每次都把dist文件下的文件删除,并且把新打包的文件传入dist    new htmlWebpackPlugin({      template:'./index.html', // w这个是模板文件,每次打包好的js会自动引入到这个html里      filename:'home.html', // 打包以后文件的名称,一般不会做更改还是叫index.html      hash:true // 就是自动在output的filename上自动加上hash值,不用再filenmae里面写了    })    // 多个html打包    // new htmlWebpackPlugin({    //   template:'./index.html', // w这个是模板文件,每次打包好的js会自动引入到这个html里    //   filename:'index.html', // 打包以后文件的名称,一般不会做更改还是叫index.html    //   hash:true, // 就是自动在output的filename上自动加上hash值,不用再filenmae里面写了    //   chunks:'index'    // }),    // new htmlWebpackPlugin({    //   template:'./other.html', // w这个是模板文件,每次打包好的js会自动引入到这个html里    //   filename:'other.html', // 打包以后文件的名称,一般不会做更改还是叫index.html    //   hash:true, // 就是自动在output的filename上自动加上hash值,不用再filenmae里面写了    //   chunks:'other'    // })  ]}