webpack安装教程

前提

运行 webpack 5 的 Node.js 最低版本是 10.13.0

node -v   //查看node版本
npm  -v  // 查看npm版本

本地安装

要安装最新版本或特定版本，请运行以下命令之一：

npm install --save-dev webpack
//或指定版本
npm install --save-dev webpack@<version>

使用 webpack v4+ 版本，并且想要在命令行中调用 webpack，你还需要安装 CLI。

npm install --save-dev webpack-cli

不推荐 全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中， 可能会导致构建失败。

查看webpack的版本

webpack 是局部安装，要进入依赖包执行webpack的命令才有效，直接 webpack -v 会被认为命令无效。使用 npm 包执行器 npx 可以自动找到对应的包执行命令

 npx webpack -v 

打包命令

 npx webpack

查看打包详情信息

 npx webpack --stats detailed

查看webpack - cli 的终端命令

npx webpack --help

设置入口文件（不推荐 ，推荐使用配置文件配置）

       //  ./src/index.js  入口文件路径  production 生产环境
      npx webpack --entry ./src/index.js --mode production   

配置文件webpack.config.js

//引入node中的path模块
const path = require('path')
module.exports = {
    //设置入口文件
    entry: './src/index.js',
    output: {
        //指定输出文件的文件名
        filename: 'bundle.js',
        //设置输出文件的路径，一定要设置成绝对路径
        // path:'./dist'
        //path.resolve(设置绝对路径)
        //  -第一个参数：表示获取到当前的webpack.config.js文件所在的物理路径
        //  -第二个参数：表示基于第一个参数的物理路径再去找到解析到当前目录下的dist
        path: path.resolve(__dirname, './dist')
    },
    //"development" | "production" | "none"
    mode: 'none'
}