Webpack

定义：前端静态模块打包工具

一、前端模块化

1.1前端模块化方案：AMD、CMD、CommonJS、ES6

1.2在ES6之前，如果想要进行模块化开发，就必须借助其他工具，并且在模块化开发完成项目后需要处理每个模块之间的依赖关系，并将其整合打包

1.3webpack核心就是让我们进行模块化开发，并且会帮助处理模块之间的依赖关系

1.4不仅仅时JS文件，CSS、img、json文件等都会被当作模块化使用

二、安装

2.1webpack为了可以正常运行，依赖node环境

2.2node环境为了可以正常执行很多代码，必须其中包含各种依赖的包

2.3node内部有npm工具，负责安装各种各样的包

// 1.检测node版本
node -v

// 2.全局安装webpack
npm install webpack@3.6.0 -g

三、基本使用

3.1文件夹src和打包文件夹dist

3.2src文件夹中需要一个main.js作为入口

3.3dist文件夹中有一个bundle.js的打包文件

3.4终端写法：webpack ./src/main.js ./dist/bundle.js--从main.js打包到bundle.js

3.5index.html只需要引入打包好的bundle.js即可

// CommonJS结合webpack

// math.js导出
function add(a, b) {
    return a + b;
};
function mul(a, b) {
    return a * b;
};
// 导出
module.exports = {
    add,
    mul
};

// main.js导入
const { add, mul } = require("./math.js");

// ES6结合webpack

// info.js导出
const name = "yg";
const age = 25;
const height = 1.93;
// 导出
export {name, age, height};

// main.js导入
import {name, age, height} from "./info.js";

四、配置

智能配置入口和出口文件

4.1新建文件名称：webpack.config.js

4.2通过CommonJS导出指定入口和出口

module.exports = {
    entry: "入口文件",
    output: "出口文件"
}

// 1.导入path
const path = require("path");

// 2.执行npm init初始化，会自动安装配置好package.json

// 3.通过npm install可以安装依赖文件，会多一个package-lock.json

// 4.在package.json脚本文件里写入"build": "webpack"，可以执行npm run build进行打包，这里默认是全局的webpack

// 5.安装本地webpack：npm install webpack@3.6.0 --save-dev(表示开发时依赖，打包前需要，之后不需要)，在package.json中会多一个devDependencies，多一个node_modules文件夹

// 6.只要在终端写的webpack都是运行的全局的，在package.json中的webpack是本地的
// 通过CommonJS导出
module.exports = {
  // 入口
  entry: "./src/main.js",
  // 出口
  output: {
    // 路径拼接调用path的resolve方法：第一个参数是__dirname，第二个参数是出口文件夹名
    path: path.resolve(__dirname, "dist"),
    // 出口文件名
    filename: "bundle.js",
    // 涉及任何url都会在前面拼接dist
    publicPath: "dist/"
  }
}

五、loader

webpack的核心概念loader

5.1通过npm安装需要使用的loader

5.2在webpack.config.js中的module关键字进行配置

5.3--save-dev表示只有开发时依赖；--save表示运行时依赖

css-loader/style-loader

// main.js引入依赖其他css文件
require("./css/base.css"); // CommonJS
import "./css/base.css";  // ES6

// 安装css-loader
npm install --save-dev css-loader@2.0.2
//安装style-loader
npm install --save-dev style-loader@0.23.1

// 配置
{
  // css-loader只负责文件加载
  // style-loader负责将样式添加到dom
  // 使用多个loader从右向左读取
  test: /\.css$/i,
  use: ["style-loader", "css-loader"],
},

less-loader：针对less样式

// 安装
npm install less less-loader@4.1.0 --save-dev

// 配置
{
  test: /\.less$/i,
  loader: [
    // compiles Less to CSS
    'style-loader',
    'css-loader',
    'less-loader',
  ],
},

url-loader/file-loader：针对图片问题

// 安装
npm install --save-dev url-loader@1.1.2
npm install --save-dev file-loader@3.0.1

// 配置
{
  test: /\.(png|jpg|gif|jpeg)$/i,
  use: [
    {
      loader: 'url-loader',
      options: {
        // 当加载图片小于limit时，会将图片编译成base64形式
        // 当加载图片大于limit时，需要安装file-loader@3.0.1
        limit: 8192,
        // 对打包好的图片进行规范化命名
        // img文件夹下的[动态初始名][动态哈希值8位][动态后缀名]，用点连接
        name: "img/[name].[hash:8].[ext]"
      },
    },
  ],
},
  
// 图片未显示是因为路径报错，需要在outoput位置配置公共路由
publicPath: "dist/"

babel-loader:：针对ES6语法转换为ES5

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

// 配置
{
  test: /\.m?js$/,
  // 排除
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['es2015']
    }
  }
}

六、引用VUE

// 安装
npm install --save vue@2.5.12
npm install --save-dev vue-loader@14.2.2 vue-template-compiler@2.5.12

七、插件plugins[数组类型]

7.1版权声明插件

// 自带插件，不需要安装

// 导入webpack
const webpack = require("webpack");

// 使用
new webpack.BannerPlugin("最终版权归coderyg所有"),

7.2打包html的插件

作用：

7.2.1.1自动生成一个index.html文件；

7.2.1.2将打包的js文件，自动通过script标签插入到body中

注意：

7.2.2.1template表示根据什么模板来生成html；

7.2.2.2需要删除publicPath属性，否则插入的script标签中的src可能会有问题

// 安装
npm install --save-dev html-webpack-plugin@3.2.0

// 导入
const HtmlWebpackPlugin = require("html-webpack-plugin");

// 使用
new HtmlWebpackPlugin({
  // 根据index.html为模板生成
  template: "index.html"
}),

7.3压缩丑化插件

// 安装
npm install --save-dev uglifyjs-webpack-plugin@1.1.1

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

// 使用
new uglifyJsPlugin()

八、搭建本地服务器

// 安装
npm install --save-dev webpack-dev-server@2.9.1

// 设置
// webpack.config.js配置
devServer: {
    // 为哪个文件夹提供服务，默认是根文件夹
    contentBase: "./dist"
    // 端口号
    prot: ""
    // 页面实时刷新
    inline: true
    // 在SPA页面中，依赖HTML5的history模式
    historyApiFallback: ""
}
// package.json配置
"dev": "webpack-dev-server --open"

// 使用
npm run dev