webpack的基本使用

安装webpack

npm i webpack -g

npm i webpack-cli -g

1.基础用法（无需配置webpack.config.js文件）

1.2 新建需要打包的测试文件input.js

const sayHello = function() {
    console.log("sayHello");
}

cmd命令行运行  (mode参数的作用 {无优化: none,开发: development,生产: production})

webpack --mode development .\input.js -o .\bundle.js

 

2.1 单文件打包

2.1.1 新建需要打包的测试文件input.js

const sayHello = function() {
    console.log("sayHello");
}

2.1.2 配置webpack.config.js文件（entry：入口文件 output：输出文件）

const path = require("path");

// SPA(单文件打包)
module.exports = {
    mode: 'development',
    entry: './input.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

cmd命令行运行

webpack

 

 

 

 

 

 

2.2 多文件打包

2.2.1 新建需要打包的

测试文件home.js 

const sayHello = function() {
    console.log("home");
}

 

测试文件other.js

const sayHello = function() {
    console.log("other");
}

测试文件about.js

const sayHello = function() {
    console.log("about");
}

2.2.2 配置webpack.config.js文件（entry：入口文件 output：输出文件）

const path = require("path");

// MPA(多文件打包)
module.exports = {
    mode: 'development',
    entry: {
        home: './home.js',
        about: './about.js',
        other: './other.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
    }
}

cmd命令行运行

webpack

 

 

 

 

 

 2.3 webpack-dev-server的使用（热替换）

安装

npm init -y

npm i webpack

npm i webpack-cli

npm i webpack-dev-server

2.3.1 第一种用法

2.3.1.1配置webpack.config.js文件（entry：入口文件 output：输出文件）

const path = require("path");

module.exports = {
    mode: 'development',
    entry: './input.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

2.3.1.2在package.json中添加

"dev": "webpack-dev-server --port 8080"

{ --open: 打开浏览器,
  --port: 设置端口,
  --contentBase: 默认打开文件夹路径,
  --hot: 以补丁的形式添加新修改的代码 (4.x以上版本不需要添加)}

2.3.1.2 新建需要打包的测试文件input.js 

const sayHello = function() {
    console.log("input");
}

cmd命令行运行

npm run dev

2.3.2 第二种用法

2.3.2.2在package.json中添加

配置webpack.config.js文件（entry：入口文件 output：输出文件）

const path = require("path");

module.exports = {
    mode: 'development',
    entry: './input.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    devServer: {
        port: 8080,
        compress: true
    }
}

这种方式添加hot有可能报错，建议使用--hot（即第一种方式）

cmd命令行运行

npm run dev

 

 dev-server编译的文件保存在内存而不是硬盘，所以在文件夹中不可见，可用浏览器查看