打包命令

在当前项目路径下, 输入命令
$ webpack 入口出口
注意: webpack 命令是全局命令

webpack ./src/main.js ./dist/bundle.js

配置 webpack.config.js 文件

通过 Node.js 导入 pash 包
使用 Node.js 前, 初始化 npm

npm init

倒入模块路径

const path = require("path");

配置

module.exports = {
  entry: "./src/main.js", // 入口
  output: {
    // 出口对象
    path: path.resolve(__dirname, "dist"), // 出口文件路径
    filename: "bundel.js", // 出口文件名字
    publicPath: "dist/" // 打包资源后自动为url、src添加文件路径
  }
}

配置 package.json 文件

通过 npm init 得到的 json 文件配置

{
  "name": "meetwebpack",  // 项目名称
  "version": "1.0.0",   // 项目版本
  "description": "",    // 描述
  "main": "index.js",
  "scripts": {    // 脚本命令映射
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC"  // 是否开源
}

将 webpack 命令映射到npm run build上
- 且优先在项目中寻找本地命令, 如果本地没有该命令再去全局找此命令

Webpack 打包 (ES6/TS 转 ES5, Less 转 css, vue 转 js 等)

在入口 js 中导入此文件
- 例如: require("./css/normal.css");
为 Webpack 扩展 loader
- 更多 loader 请上 Webpack官方文档查询

loader 使用

通过 npm 安装需要使用的 loader
在官网上查找对应的 loader, 例如 css 的 loader: css-loader
在 webpack.config.js 中的 module 关键字下进行配置

安装

npm install css-loader --save-dev

配置

module: {
  rules: [
    {
      test: /\.css\$/,
      use: ["style-loader", "css-loader"]
    }
  ]
}

css-loader 只负责加载 CSS 文件, 不会帮助我们解析文件
- 所以我们还需要安装解析 CSS 文件的 loader

npm install style-loader --save-dev

然后在 use 属性中添加style-loader

module: {
  rules: [
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader"]
    }
  ];
}

注意: 在使用多个 loader 时, Webpack 从右向左执行
- 即添加style-loader必须放在css-loader左边

ES6 转 ES5

需要使用 babel 的 loader

安装

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

配置

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ["es2015"]
        }
      }
    }
  ]
}

配置 Vue

安装

npm install vue --save

导入 vue

import Vue from "vue"

runtime-only 代码中, 不可以使用任何的 template
runtime-compiler 代码中, 可以使用 template, 因为有 compiler 可以用于编译 template
解决方案: 指定版本, 在 webpack.config.js 中配置

resolve: {
  alias: { // 别名
    "vue$": "vue/dist/vue.esm.js"
  }
}

编译 .vue 文件

想要编译 Vue, 需要安装两个 loader 和相应的 loader 配置
vue-loader(14.x 版本开始, 要想使用该 loader 还需要配置一个插件, 或降低版本, 降低版本后需要重新 npm install)
vue-template-compiler (用于解析.vue文件中的template)

Plugin 插件

添加版权的 Plugin

该插件名字叫 BannerPlugin, 属于 Webpack 自带的插件
按照下面的方式来修改 webpack.config.js 文件

const webpack = require("webpack")
module.exports = {
  plugins: [new webpack.BannerPlugin("版权归 coerlion 所有")]
}

打包 HTML 的 plugin

如何将 index.html 打包到 dist 文件夹中呢?
- HtmlWebpackPlugin 插件可以为我们做这些事情
- 自动生成一个 index.html 文件(可以指定模板来生成)
- 将打包的 JS 文件, 自动通过 script 标签插入到 body 中

安装 html-webpack-plugin 插件

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

使用插件, 修改 webpack.config.js 文件中的 plugins 部分内容如下

先导入 html-webpack-plugin

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

再到 module.exports 下进行配置

plugins: [
  new htmlWebpackPlugin({
    template: "index.html"
  )}
]

这里的 template 表示根据什么模版来生成 index.html
- 在当前目录下, 根据 index.html 模板文件来生成一个在 dist 文件夹下的 index.html 文件
另外, 我们需要删除之前在 output 中添加的 publicPath 属性, 否则插入的 script 标签中的 src 可能会有问题

js 压缩的 Plugin

使用第三方插件uglifyjs-webpack-plugin, 并且版本号指定 1.1.1, 和 CLI2 保持一致

npm install [email protected] --save-dev

修改 webpack.config.js 文件, 并且使用

先导入uglifyjs-webpack-plugin

const uglifyJsPlugin = require("uglifyjs-webpack-plugin");

再到 module.exports 下进行配置

plugins: {
  new uglifyJsPlugin()
}

搭建本地服务器

Webpack 提供了一个可选的本地开发服务器, 这个本地服务器基于 Node.js 搭建, 内部使用 express 框架
它可以实现我们想要的让浏览器自动刷新显示我们修改后的结果(它不会编译文件到磁盘中, 而是存储在内存中)

安装

npm install --save-dev [email protected]

devServer 也是作为 module.exports 中的一个选项, 选项本身可以设置如下属性:
1. contentBase: 为哪一个文件夹提供本地服务, 默认是根文件夹, 我们这里要填写./dist
2. port: 端口号
3. inline: 页面是否实时刷新
4. historyApiFallback: 在 SPA 页面中, 依赖 HTML的 history 模式

module.exports 配置修改如下:

devServer: {
  contentBase: "./dist",
  inline: true
}

使用

方法 1: node_modules/.bin/webpack-dev-server
方法 2: 在 package.json 中添加 scripts 属性"dev": "webpack-dev-server", 即可通过npm run dev的方式直接使用
- webpack-dev-server 命令参数
  - 例如 "dev": "webpack-dev-server --open"
  - open 参数表示直接打开浏览器

Webpack 配置文件分离

开发时配置文件和运行时配置文件的分离
创建文件夹 build
创建文件 base.config.js 存放开发时和运行时依赖
创建文件 dev.config.js 存放开发时依赖
创建文件 prod.config.js 存放运行时依赖

安装 webpack-marge

npm install webpack-merge --save-dev

合并三个文件

修改 base.config.js 配置文件
将所有开发时、运行时依赖存放到该文件之后修改 path 路径

path: path.resolve(__dirname, "../dist")

修改 prod.config.js 配置文件

// 运行时依赖
const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin")
const webpackMerge = require("webpack-merge")
const baseConfig = require("./base.config")

module.exports = webpackMerge(baseConfig, {
  plugins: [new UglifyjsWebpackPlugin()]
})

修改 dev.config.js 配置文件

// 开发时依赖
const webpackMerge = require("webpack-merge")
const baseConfig = require("./base.config")

module.exports = webpackMerge(baseConfig, {
  devServer: {
    contentBase: "./dist",
    inline: true
  }
})

修改 package.json 中的 scripts 下的 build 和 dev 属性为:

"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"

Webpack 的使用