webpack入门

基于: （持续更新中）可能是最简单易懂的Webpack教程_哔哩哔哩_bilibili 首先，要确保你的电脑有node环境，使用 node -v 命令查看 node版本.

webpack 安装

初始化当前文件夹

npm init -y

安装 webpack 和 webpack-cli

npm install webpack webpack-cli --save -dev

等待安装完成......

webpack 功能

打包

在当前文件夹内建立 src 文件夹，在里面建立 index.js 文件:

console.log('hello hamo');

创建 webpack 配置文件 webpack.config.js，配置 webpack：

 //CommonJS 语法
const path = require('path')
const path = require('path') //导入 node.js 的 path 包

module.exports = {
  mode: 'development', //开发模式
  entry: path.join(__dirname, 'src', 'index.js'), //入口文件
  //告诉 webpack 从 src 下的 index.js 进行打包
  //使用 path 包内 join 方法拼接路径
  output: {
    path: path.join(__dirname, 'dist'),
    //将打包好的文件放到哪个目录下
    filename: 'bundle.js'
    //打包后的文件名
  }
}

现在，已经完成了基本的 webpack 配置，我们下一步要编辑 package.json 文件来实现对 使用 webpack 进行打包的命令的编写.
E 在 script 中加入如下内容：

    "build": "webpack"

现在 就可以使用 npm run build 命令进行打包了.

可以看到，在根目录生成了 dist 文件夹，里面是经过解析的 bundle.js

使用 HtmlWebpackPlugin 插件自动打包

安装插件

npm i html-webpack-plugin --save-dev

--save-dev 表示作为开发依赖安装

之后在 webpack.config.js 配置文件中引入该插件：

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

使用插件

在 webpack.config.js 新加入 plugins 配置项：

module.exports = {
    ...
  plugins:[
    new HtmlWebpackPlugin({
        template: path.join(__dirname, 'src', 'index.html'),
        filename: "index.html"
    })
  ]
}

template：以那个文件作为模板打包
filename：打包后的文件名

配置完成后，输入指令 npm run build 打包.

打开 dist 目录下的 index.html：

发现其自动为我们引入了打包好的 bundle.js

这样一来，我们只需要在 src 下提供模板文件和写有 ES6 语法的 js 文件，再直接使用 npm run build 命令就可以自动生成 html 和 js 文件.

webpack-dev-server

安装

npm i webpack-dev-server --save-dev

配置

和 HtmlWebpackPlugin 插件的配置一样，在 webpack.config.js 下加入 devServer 配置项：

const { dirname } = require('path')
const path = require('path') //导入 node.js 的 path 包
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    ...
  plugins:[...],
  devServer:{
    port: 8080, //在本机开启服务器的端口号
    static: path.join(__dirname, 'dist') //静态资源文件夹目录
  }
}

启动

编写 package.json 文件，在 scripts 里加入

"dev": "webpack-dev-server"

执行脚本：npm run dev

就会弹出下面几行代码：

按住 ctrl ，鼠标左键点击划红线的端口号即可进入网页.

我们现在修改 src 下的 index.js 文件，会发现我们所修改的内容会实时解析到位于本机 8080 端口的 web 服务器上，但实际上 webpack-dev-server 并没有将我们在 src 下修改的内容经过解析并保存至 dist 文件夹，所以我们在调试完成后，还是需要运行 npm run build 命令进行打包.

使用 babel 编译 ES6 代码

首先，我们进入 src 目录下的 index.js 文件，写一段 ES6 的箭头函数代码：

const sum = (num1, num2) => {
  return num1 + num2;
}

const result = sum (1, 2);
console.log(sum);

使用 npm run dev 运行 webpack-dev-server 进入网页 查看源代码：

可以发现在 js 文件中我们所写的 ES6 代码依旧以箭头函数形式展现，但是如果我们的代码运行在一个低版本的浏览器上的话 可能造成无法解析 ES6 的代码，所以我们需要使用工具将其转化为 ES5 代码.

安装依赖

npm i @babel/core @babel/preset-env babel-loader --save -dev

创建配置文件

在根目录下创建 .babelrc 文件：

{
  //预设：babel一系列插件的集合
  "presets": ["@babel/preset-env"]
}

在 webpack.config.js 中添加 module 模块

module.exports = {
    ...
  module:{
    rules:[
      {
        test: /\.js$/,
          //正则表达式：匹配以 .js 结尾的文件
        loader: 'babel-loader',
          //使用刚才所安装的 babel-loader 对ES6 代码进行编译
        include: path.join(__dirname, 'src'),
          //包含那些需要被编译的代码
        exclude: /node_modules/
      }
    ]
  },
  plugins:[...],
  devServer:{...}
}

测试

配置完成后，使用 npm run build 命令打包 或者使用 npm run dev 运行 webpack-dev-server ，再次在网页中查看 js 源代码

发现我们所写的 ES6 函数已经被解析成了 ES5 代码.

同样 我们在使用 ES6 的关键字 class 定义类，使用 babel 也可以转换成ES5 的代码：

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const animal = new Animal('边牧', 2);
console.log('animal:', animal);

---