1.全局安装webpack命令

npm i webpack webpack-cli -g

2.项目中安装webpack

npm i webpack webpack-cli -D

注意：需要在node.js环境中使用

npm在5.2版本中提供一个npx命令

npx要解决的主要问题是调用项目内部安装的模块,原理就是在node_modules下边的.bin目录中找到相对应的命令执行

使用webpack命令: npx webpack

1.入口(entry): 程序的入口js;

2.输出(output): 打包后存放的位置;

3.loader: 用于对模块的源代码进行转换;

4.插件(plugins): 插件目的在于解决loader无法实现的其他情况;

1.配置webpack.config.js;

2.运行npx webpack;

const path = require('path')
module.exports = {
  // 入口文件配置
  entry: './src/index.js',
  // 出口文件配置
  output: {
    // 输出的路径，webpack2起就规定必须是绝对路径
    path: path.join(__dirname, 'dist'),
    // 输出文件名字
    filename: 'bundle.js'
  },
  mode: 'development' // 默认为production, 可以手动设置为development, 区别就是是否进行压缩混淆
}

将npx webpack命令配置到package.json脚本中

1.配置packages.json;

2.运行npm run build;

{
  "name": "webpack-basic",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1"
  }
}

每次要编译代码时,手动运行npm run build 会很麻烦

webpack中有几个不同的选项,可以帮助你在代码发生变化后自动编译代码:

1. webpack’s Watch Mode
2. webpack-dev-server
3. webpack-dev-middleware

**注意:**开发时一般使用 webpack-dev-server

1. 安装devServer:

devServer需要依赖webpack,必须在项目依赖中安装webpack

npm i webpack-dev-server webpack -D

2. index.html中修改

3. 运行: npx webpack-dev-server

4. 热加载,编译后自动打开,配置端口号,

   1. 运行 npx webpack-dev-server --hot --open --port 8899

5. 在packages.json的scripts:

   1. “dev”: webpack-dev-server --hot --open --port 8899

6. 运行npm run dev

devServer会在内存中生成一个打包好的bundle.js, 专供开发时使用,打包效率高,修改代码后会自动重新打包以及刷新浏览器

1.修改webpack.config.js

const path = require('path')
module.exports = {
    // 入口文件配置
    entry: './src/index.js',
    // 出口文件配置
    output: {
        // 输出的路径,从webpack2开始就规定必须是绝对路径
        path:path.join(__dirname,'dist'),
        // 输出文件名字
        filename: 'bundle.js'
    },
    devServer: {
        port: 8899,
        open: true,
        hot: true
    },
    mode: 'development'
}

2.修改package.json 的scripts: “dev”: “webpack-dev-webpack”

3.运行npm run dev

在webpack指令后面加上 --watch 参数

作用: 监视本地项目文件变化,发现有修改代码会自动编译打包,生成输出文件;

通过cli方式设置watch参数:

1.配置packages.json中的script "watch": "webpack --watch"

2.运行npm run watch

通过配置文件对watch参数进行修改:

const path = require('path')
// webpack的配置文件遵循着CommonJS规范
module.exports = {
  entry: './src/main.js',
  output: {
    // path.resolve() : 解析当前相对路径的绝对路径
    // path: path.resolve('./dist/'),
    // path: path.resolve(__dirname, './dist/'),
    path: path.join(__dirname, './dist/'),
    filename: 'bundle.js'
  },
  mode: 'development',
  // 把watch值为true
  watch: true
}

注意: 使用npm run build命令运行