webpack基础知识

安装

// 全局安装
npm install webpack webpack-cli -g
// 局部安装
npm install webpack webpack-cli -D
// 等价于
npm install webpack webpack-cli --save -dev

全局安装webpack存在的问题：
如果有不同的webpack版本的项目需要同时运行时，就会起冲突。所以推荐在项目内安装webpack。安装完成后可通过npx webpack -v查看webpack版本。

默认配置

webpack默认配置在webpack.config.js

  // 引入node.js的path模块  
  const path = rquire('path');                      
  module.exports = {
      // mode: "production",  // 打包后代码为压缩版
      mode: "development",   // 打包后代码不压缩
      // 项目从哪个文件开始打包
      entry: './index.js',     
      module: {
        rules: [{
          test: /\.jpg$/,
          use: {
            loader: 'file-loader'
          }
        }]
      },
     // 打包文件放置地方                  
      output: {                                 
          filename: 'index.js',      // 打包后的文件名
          // path后边需要放置绝对路径
          path:path.resolve(__firname, 'dist')  // 打包后的文件夹
      }
  }

打包命令：npx webpack 

注意：webpack.config.js为默认文件名，如果要改为其他名字（如：webpackconfig.js），打包时的命令也需要修改为：

  // 让webpack以webpackconfig.js为配置文件
  npx webpack--config webpackconfig.js

简化npx命令

在package.json中script配置：

  "script": {
      "bundle":  "webpack"
  }
配置完成后就可以用 npm run bundle 代替 npx webpack