最简单的webpack入门教程

1 前言

这是一个简单的webpack入门教程

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

2 基本使用

使用webpack的前提是已经有了node环境，安装node就不赘述了

2.1 初始化

在空文件夹中使用命令行执行：

npm init -y

就会在当前目录下创建一个package.json文件

2.2 安装插件

还是在当前目录底下使用命令行执行：

npm install webpack webpack-cli --save-dev

2.3 配置项

在根目录底下创建src文件夹，里面创建index.js文件，随便写一行：

index.js

然后还是在根目录底下创建一个webpack.config.js文件用来写webpack的配置项：

const path = require('path')

module.exports = {
  mode: 'development',
  // 入口文件
  entry: path.join(__dirname, 'src', 'index.js'),
  // 输出文件
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

以上是webpack最简单的配置

2.4 打包

在package.json文件下找到scripts选项写一条脚本命令：

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

当前package.json内容如下：

package.json

然后在命令行中执行npm run build，webpack会开始打包，打包完成以后会生成一个dist文件夹，webpack会把src/index.js作为入口文件打包到dist底下，打开dist中的bundle.js（bundle.js也是在webpack.config.js中的filename配置命名的）可以看到之前在index.js中的内容：

bundle.js

以上就是最基础的webpack使用方法

3 HtmlWebpackPlugin

html-webpack-plugin 插件专门为由webpack打包后的js提供一个载体，即一个HTML模板，里面通过script标签引用打包后的JS。

3.1 插件安装

在根目录底下打开命令行执行命令安装HtmlWebpackPlugin插件：

npm install html-webpack-plugin --save-dev

3.2 使用插件

在src目录底下创建index.html文件作为模板文件：

src

在webpack.config.js文件中引入并使用插件：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  // 入口文件
  entry: path.join(__dirname, 'src', 'index.js'),
  // 输出文件
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'index.html'),
      filename: 'index.html'
    })
  ]
}

使用HtmlWebpackPlugin插件传入参数template是模板文件即刚刚创建的index.html，filename是打包出来的html文件名

3.3 打包

在命令行执行npm run build，在打包出来的dist文件夹中运行index.html文件，在控制台可以看到输出了bundle.js中的hello world：

hello world

HtmlWebpackPlugin插件已经帮我们把bundle.js引入到了模板文件index.html中

4 webpack-dev-server

webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。

4.1 插件安装

在根目录底下打开命令行执行命令安装插件：

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

4.2 使用插件

在webpack.config.js中增加配置：

  devServer: {
    // 端口
    port: 8090,
    // 静态资源目录
    static: path.join(__dirname, 'dist')
  }

在package.json的scripts中添加一条dev命令：

  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  },

4.3 实现效果

在根目录下使用命令npm run dev，启动以后在命令行可以看到启动成功：

命令行

由于我配置的端口号是8090，所以打开http://localhost:8090/，打开控制台可以看到hello world，然后直接在index.js中修改为console.log('hello world!!!')，然后直接看到在浏览器的控制台中直接生效了：

控制台

5 源码

https://github.com/chrischen0405/webpack-demo