webpack基本使用与自动编译

webpack基本使用

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。

使用场景：

1. 场景一：模块化开发, 处理依赖 。比如在demo目录下，有两个文件，a.js,b.js，需要把它们合并成一个bundle.js文件;
2. 场景二：多入口的情况下，webpack输出不同的打包文件。

基本使用：

首先创建一个文件夹目录，初始化 npm，新建文件./src/index.js, 然后本地全局安装webpack webpack-cli （4.X版本）

npm install -g webpack webpack-cli

（一）不通过配置文件直接使用

npx webpack 

或者

webpack

或者添加mode

webpack --mode=development

执行后输出文件 dist/main.js

（二）配置文件webpack.config.js

创建配置文件webpack.config.js (如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它, 也可以使用自定义名称的配置文件)

const path = require("path"); //Node.js内置模块
module.exports = {
     
    entry: './src/main.js', //配置入口文件
    output: {
     
    path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    }
}

命令行执行编译命令

webpack --mode=development

如果是自定义名称的配置文件, 需要使用 --config 选项。这对于需要拆分成多个文件的复杂配置是非常有用。

npx webpack --config webpack.config.js

或者配置项目的npm运行命令，修改package.json文件

"scripts": {
     
    //...,
    "dev": "webpack --mode=development"
 }

需要注意的是，webpack 支持 ES6 中的 import 和 export 语句，但是其他ES6新特性需要配置转译器(babel)使用，否则请使用ES5。

webpack自动编译

（一） watch 监听模式

如果不想每次修改模块后都重新手动运行编译命令，可以启动监听模式。

开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译。

webpack --watch
//--watch 监听模式
//还可以添加 --progress 进度 --colors 颜色

配置到package.json

  "scripts": {
     
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch":"webpack --watch --mode=development"
  },

运行npm run watch后开启监听模式，自动编译打包，但是浏览器上仍然需要刷新页面才显示最新修改效果。

（二）webpack-dev-server 模块热更新 HMR

webpack-dev-server 提供了一个简单的web服务器和实时重载的功能。

webpack-dev-server 通过 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

基本使用：

npm install webpack-dev-server --save-dev

webpack.config.js添加配置

module.exports = {
     
    entry: './src/index.js', //配置入口文件
    devServer: {
     
        contentBase: './dist',//告诉dev服务器为dist目录中文件提供服务
        hot: true
    },
    //...
}

package.json添加配置

  "scripts": {
     
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open",
  },

运行npm run dev 即可。

---

待更新

Loaders

Plugins

原理

Reference

• webpack官网
• webpack的基本使用
• webpack自动编译