webpack初体验

webpack初体验

ps：（下文的文件夹名称可以自己换）

• webpack是js的打包工具
• 首先需要先安装npm，具体放法自行查询
• 然后需要创建一个文件夹（webpack）
• 然后进入这个文件夹的cmd窗口
• 然后需要先初始化一下npm
• npm init -y
• 然后就是全局安装webpack
• npm install webpack webpack-cli -g (或者使用）yarn add webpack webpack-cli -g
• 然后安装开发环境的webpack
• npm install webpack webpack-cli --save-dev （或者使用）yarn add webpack webpack-cli --save-dev
• 然后我们在webpack文件夹中创建一个src文件夹
• 然后在src中创建index.js
• 然后在最外层的文件夹创建一个build文件夹
• 我们必须用cmd窗口，如果用vscode的话也需要在终端使用cmd不能使用powershell，然后输入以下指令
• webpack ./src.index.js -o ./build/built.js --mode=development
• 其中webpack后面的是入口文件的路径，-o就是打包然后-o后面的就是打包好之后存放的路径，–mode就是在什么环境development（开发环境）production（生产环境），开发环境就是开发者看的，所有代码不会进行压缩，而生产环境是轻便为主，所以会对代码进行压缩，这个就是两个环境的区别。
• 打包好之后会显示以下内容
• C:\Users\TFTECH\Desktop\webpack>webpack ./src/index.js -o ./build/built.js --mode=development asset main.js 1.25 KiB [compared for emit] (name: main) ./src/index.js 62 bytes [built] [code generated] webpack 5.50.0 compiled successfully in 85 ms
• 然后我们可以依次进到对应的build文件夹中通过node环境运行代码 —》 node built.js
• webpack可以处理js/json的资源，不能处理css/img等资源，如果需要处理则需要下载对应的loader或者插件
• 为了更简便的进行webpack打包，我们可以对webpack进行配置
• 在最外层文件夹中创建webpack.config.js(这个名字必须是这个，webpack才会识别到)
• webpack.config.js

const {resolve} = require('path')
module.exports = {
  //webpack配置
  //入口文件
  entry:"./src/index.js",
  //输出
  output:{
    //输出文件名
    filename: 'built.js',
    //输出路径
    //__dirname nodejs的变量,就是当前的相对路径
    path: resolve(__dirname,'build')
  },
  //loader的配置
  module:{
    rules:[
      //详细的loader配置
    ]
  },
  //plugin配置
  plugins:[
    //详细的plugins的配置
  ],
  //模式
  mode:'development'
  //mode:'production'
}

• 配置好以上的webpack.config.js之后就可以通过指令webpack进行打包就不用写之前的那一大串（webpack ./src.index.js -o ./build/built.js --mode=development）这个了。