webpack 相关知识梳理

一、 webpack 基础命令

查看webpack版本信息：npm info webpack versions
全局安装：npm install webpack webpack-cli -g
全局安装指定版本：npm install [email protected] webpack-cli -g
卸载全局安装：npm uninstall webpack webpack-cli -g
查看版本：webpack -v （node.js会在全局的模块目录中去找这个命令，没有安装会找不到这个命令的）
项目内安装：npm install webpack webpack-cli --save-dev（--save-dev可以等价为-D）
查看项目内webpack版本：npx webpack -v
npm install webpack --save
使用项目webpack打包js文件：npx webpack Xxx.js
使用全局的webpack打包js文件：webpack Xxx.js
 初始化npm：npm init -y
安装项目依赖包：npm install
在vue中运行项目:npm run dev
打包: npm run build

二、 webpack 配置文件

当我们使用  npx webpack xxx执行打包命令的时候，似乎没有看见配置文件的影子，其实这个时候使用的是webpack的默认配置

默认的配置文件：webpack.config.js
const path = require('path');
// 配置
module.exports = {
    // 1. 项目重那个文件开始打包
    entry: './src/index.js',
    // 2. 打包文件放到哪里
    output: {
        // 3. 打包好的文件的名字
        filename: 'bundle.js',
        // 4. 打包出的文件放在哪个文件夹下 path要是绝对路径
        // __dirname就是webpack.config.js的绝对路径，和dist结合
        // 不写效果一样，默认就是
        path: path.resolve(__dirname, 'dist')
        // 绝对路径
        // path: path.resolve('F:/Test/GitTest2/')
    }
}

使用 npm scripts 简化配置

在 package.json 里面有一个scripts属性，这个数据是配置执行脚本的

{
  "name": "lesson",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "bundle": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack-cli": "^3.1.2"
  },
  "dependencies": {
    "webpack": "^4.25.1"
  }
}