webpack4(一)

问题:

1. webpack是什么
2. 如何安装webpack
3. 如何使用webpack

webpack是一个模块化打包工具

webpack是一个模块化打包工具，支持commonjs、es6、amd、cmd模块化规范；可以打包js、css、图片等文件

webpack的安装

1. 安装nodejs; 通过 node -v npm -v分别查看安装的node和npm版本
2. npm install webpack webpack-cli -D (webpack-cli是webpack的命令行工具,可以使我们在命令行中使用webpack命令)

webpack的使用

当使用webpack打包时会找当前是否有webpack.config.js配置文件，如果没有会使用webpack内一些默认的值进行打包；也可以通过 –config 配置文件名 指定配置文件
(一) webpack.config.js 基础配置

  const path = require('path');

  module.exports = {
    mode: 'development', // 打包模式 || production(默认)
    entry: './src/index.js',  // 入口 || { main: './src/index.js' }
    output: {
      path: path.resolve(__dirname, "build"),  // 文件的输出路径(绝对路径) __dirname: node内置,当前文件所在路径
      filename: 'boundle.js'
    }
  }

(二)打包指令

1. 全局webpack index.js
2. npx webpack index.js (npx 会先在当前的node_modules下找webpack)
3. npm scripts中配置；比如

"scripts": {
    "build": "webpack"
  },