1. webpack初步理解

发布于 2022年 02月 14日 19:45

webpack

安装流程

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

功能

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

核心概念

入口
- 自动找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'
    // })
  ]
}

1. webpack初步理解

webpack

安装流程

功能

核心概念

常用插件

loader

多入口文件

整体代码及注释

推荐文章