webpack 打包配置 从0到1

认识webpack

1111.png
webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具中文官方地址
1.可以帮助我们进行模块化，并且处理模块化间的各种复杂依赖关系，所以可以使用任意前端模块规范 AMD CMD CommonJs ,ES6
2.打包过程中可以对资源文件进行撤离，压缩图片，less转换css 等
3.通过各种loade的使用，可以吧css 图片等当做模块来使用
4.webpack为了能正常运行，必须依赖node环境下载node，查看node版本号：node -v
node 环境为了可以正常的执行代码，必须包含各种依赖的包，所以自带npm工具 软件包管理工具（node packages manager）

安装webpack

全局安装webpack
npm install webpack -g 

指定版本号全局安装webpack
npm install webpack@版本号 -g 

局部安装webpack（开发环境）
1.cd 对应目录
2.npm install webpack --save-dev

区分全局和局部，主要是为了有些时候 版本号不同的情况下打包出来的文件也不同
1.在终端（cmd终端或者vscode的terminal等）直接执行webpack命令，使用的是全局安装的webpack
2.在package.json文件中scripts 脚本中，如果使用了webpack命令，首先会找局部webpack，找不到才会找全局。

配置webpack

1.npm init ，初始化生成 package.json文件
2.创建webpack.config.js文件
3.设置入口文件和出口文件
4.webpack 和package.json 的脚本（scripts）绑定使用-》npm run xx 打包运行

const path = require("path");
module.exports = {
  //入口文件
  entry: "./src/main.js",
  //出口文件
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
};

package.json scripts脚本模块
"scripts": {
    "build": "webpack"
  },

终端直接运行：npm run build
即可打包以main.js为入口的相互引用的各种js，css等文件,
合并生成dist目录下的bundle.js
目录结构

2222.png

main.js文件

//使用commonJs的模块化规范
const { add, mul } = require("./js/MathUtil");
console.log("hello");
console.log(add(1, 2));
console.log(mul(1, 2));

//使用es6的模块化规范
import { name, age, address } from "./js/useInfo";
console.log(name);
console.log(age);
console.log(address);

//把css 文件当成 模块导入
require("./style/main.css");

//依赖less文件
require("./style/normal.less");

webpack中loader的使用

loader 官方地址
webpack本身的能力来说，可以处理我们写的js代码，并且会自动处理js之间相关的依赖，但是开发中不仅仅有基本的js代码处理，还需要加载css，图片，包括将less scss等转换为css，.vue文件转成js文件等
对于webpack本身的能力来说，转化这些是不支持的，所以就需要给webpack进行扩展，也就是loader
loader 主要是用于转换某些类型的模块，是一个转换器。
使用过程
1.通过npm安装需要使用的loader
2.在webpack.config.js 中module->rules关键字下进行配置

最常用的loader：

1. 样式loader

less-loader
1.创建.less 文件

@width: 10px;

body {
 font-size: @width;
 color: yellow;
}

2.安装 sass-loader：

npm install sass-loader sass webpack --save-dev

3.webpack.config.js 配置rulues

const path = require("path");
module.exports = {
  //入口文件
  entry: "./src/main.js",
  //出口文件
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        //css-loader 只负责讲css文件进行加载
        //style-loader 负责将样式添加到dom中
        //使用多个loader时，依次加载顺序从右边到左边
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/i,
        use: [
          // 将 JS 字符串生成为 style 节点
          "style-loader",
          // 将 CSS 转化成 CommonJS 模块
          "css-loader",
          // 将 Sass 编译成 CSS
          "sass-loader",
        ],
      },
    ],
  },
};

2.图片处理loader

1.安装url-loader和file-loader

npm install url-loader  file-loader --save-dev

2.配置webpack.config.js rules

{
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              //当加载的图片 小于limit时8k 会将图片编译Base64字符串形式
              //当加载的图片 大于limit时8k 需要使用file-loader模块进行加载
              limit: 8192, //限制大小可以修改
            },
          },
        ],
      },

3.在css中设置背景url图片

body {
    /* background: green; */
    background: url('../img/test.png');
  }

webpack自动帮助我们生成一个图片放在dist目录下，这个图片的名字很长，是一个32位的hash值，目的是防止名字重复。
实际项目中，可能对打包的图片名字有一定要求，并且要将所有的图片放在一个文件夹中，所有需要在webpack中rules 添加一定的配置--name

 options: {
              //当加载的图片 小于limit时8k 会将图片编译Base64字符串形式
              //当加载的图片 大于limit时8k 需要使用file-loader模块进行加载
              limit: 8192, //限制大小可以修改
              name:'img/[name].[hash:8].[ext]'
            },

img-->图片要打包的文件夹
[name]-->获取图片原来的名字
[hash:8]-->防止图片命名冲突，依然使用hash，但是只保留8位
ext-->使用图片原来的扩展名

3333.png

file-loader 可以指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存。此外，这意味着 你可以就近管理图片文件，可以使用相对路径而不用担心部署时 URL 的问题。使用正确的配置，webpack 将会在打包输出中自动重写文件路径为正确的 URL。

url-loader 允许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值)，这会减少小文件的 HTTP 请求数。如果文件大于该阈值，会自动的交给 file-loader 处理。

Vue Loader

vue-loader是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件
如果你不想手动设置 webpack，我们推荐使用 Vue CLI 直接创建一个项目的脚手架。通过 Vue CLI 创建的项目会针对多数常见的开发需求进行预先配置，做到开箱即用。

1.起步配置，安装loader

npm install -D vue-loader vue-template-compiler

2.配置webpack
Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将 vue-loader 应用到所有扩展名为 .vue 的文件上之外，请确保在你的 webpack 配置中添加 Vue Loader 的插件：

5555.png

3.创建vue文件，通过template 显示view

webpack plugin的使用

plugin官方文档
plugin 插件列表
loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务，对现有的框架进行扩展。包括：打包优化，资源管理，注入环境变量。
使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。
多数插件可以通过选项(option)自定义。
你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
plugin使用过程
1.通过npm安装需要使用的plugins（某些webpack已经内置的插件不需要安装）
2.在webpack.config.js中的plugins中配置插件
常用的几个webpack插件

1.添加版权信息的plugin BannerPlugin 属于webpack自带的插件

1.const webpack = require("webpack");
2. new webpack.BannerPlugin("最终版权归付小影子所有"),

webpack 自带的 版权说明插件，会在dist目录中生成bundle.js.LICENSE.txt 文本文件

7777.png

2.HtmlWebpackPlugin

HtmlWebpackPlugin 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。你可以让该插件为你生成一个 HTML 文件，使用 lodash 模板提供模板，或者使用你自己的 loader
该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle
1.npm 安装plugin

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

2.webpack.config.js 配置

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

module.exports = {

  其他配置...

  plugins: [new HtmlWebpackPlugin()],
};

3. js压缩的插件 uglifyjs-webpack-plugin

1.npm 安装插件

npm install uglifyjs-webpack-plugin --save-dev

2.webpack.config.js 配置插件

6666.png

webpack 搭建本地服务器 webpack-dev-server

webpack 提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现让浏览器自动刷新修改后的效果，不用每一次都执行打包命令。
1.安装webpack-dev-server

npm install -D webpack-dev-server,
npm install webpack-cli@3 -D

2.配置webpack.config.js 中devserver选项

devServer: {
    contentBase: "./dist", // 服务器访问的文件目录
    open: true, //是否是立即打开
    port: 8080, //端口号
    host: "localhost", //链接地址
  },
3.在package.json 的scripts脚本配置中添加 webpack-dev-server的配置

"scripts": {
"build": "webpack",
"dev": "webpack-dev-server"
},
4.终端执行命令 npm run dev ，打开项目，修改项目内容的时候，也不需要重新打包编译
ctrl+c退出本地服务器

webpack中配置vue

1.npm 安装 vue

npm install vue --save

2.入口js文件中，创建vue对象，绑定到index.html 中
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
    </div>
</body>
</html>

main.js

import Vue from "vue";
import App from "./APP";

//使用commonJs的模块化规范
const { add, mul } = require("./js/MathUtil");
console.log("hello");
console.log(add(1, 2));
console.log(mul(1, 2));

//使用es6的模块化规范
import { name, age, address } from "./js/useInfo";
console.log(name);
console.log(age);
console.log(address);

//把css 文件当成 模块导入
require("./style/main.css");

//依赖less文件
require("./style/normal.less");

//方式1
new Vue({
  el: "#app", //在index.html，创建div 设置id为app
  components: { App },
  template: "<App/>",
});

//方式2
// new Vue({
//   render: (h) => h(App),
// }).$mount("#app");

webpack 配置文件拆分 开发环境配置和生产环境配置

1.安装webpack-merge

npm install webpack-merge --save-dev

2.拆分config ->baseCongig devConfig,proConfig,通过webpackMerge合并，动态配置

8888.png
base-webpack-config.js

const path = require("path");
//vue加载插件
const { VueLoaderPlugin } = require("vue-loader");
//生成HTML文件插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  //入口文件
  entry: "./src/main.js",
  //出口文件
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "bundle.js",
    // publicPath: "dist/",
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        //css-loader 只负责讲css文件进行加载
        //style-loader 负责将样式添加到dom中
        //使用多个loader时，依次加载顺序从右边到左边
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/i,
        use: [
          // 将 JS 字符串生成为 style 节点
          "style-loader",
          // 将 CSS 转化成 CommonJS 模块
          "css-loader",
          // 将 Sass 编译成 CSS
          "less-loader",
        ],
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              //当加载的图片 小于limit时8k 会将图片编译Base64字符串形式
              //当加载的图片 大于limit时8k 需要使用file-loader模块进行加载
              limit: 8192, //限制大小可以修改
              name: "img/[name].[hash:8].[ext]",
            },
          },
        ],
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
    ],
  },
  resolve: {
    //导入文件 省略扩展后缀名
    extensions: [".js", ".css", ".vue"],
    alias: {
      vue$: "vue/dist/vue.esm.js",
      "@pages": path.resolve(__dirname, "../src/pages"),
      "@style": path.resolve(__dirname, "../src/style"),
      "@img": path.resolve(__dirname, "../src/img"),
      "@component": path.resolve(__dirname, "../src/component"),
    },
  },

  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html", // 打包后的文件名，默认是index.html
      template: path.resolve(__dirname, "../src/index.html"), // 导入被打包的文件模板
    }),
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
  ],
};

pro-webpack-config.js

const webpack = require("webpack");
//js文件压缩插件
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const WebpackMerge = require("webpack-merge");
const baseConfig = require("./base.webpack.config");

module.exports = WebpackMerge.merge(baseConfig, {
  plugins: [
    //webpack 自带的 版权说明插件，会在dist目录中生成bundle.js.LICENSE.txt 文本文件
    new webpack.BannerPlugin("最终版权归付小影子所有"),
    new UglifyJsPlugin(),
  ],
});

dev-webpack-config.js

const WebpackMerge = require("webpack-merge");
const baseConfig = require("./base.webpack.config");

module.exports = WebpackMerge.merge(baseConfig, {
  devServer: {
    contentBase: "./dist", // 服务器访问的文件目录
    open: true, //是否是立即打开
    port: 8080, //端口号
    host: "localhost", //链接地址
  },
});

package.json --config 指定配置文件

  "scripts": {
    "build": "webpack --config ./build/pro.webpack.js",
    "dev": "webpack-dev-server --config ./build/dev.webpack.config.js"
  },

[测试demo地址]（https://github.com/fuxiaoyingzi/MeetWebpack）