webpack 打包配置从0到1

作者: 付小影子 | 来源:发表于2021-11-01 14:53 被阅读0次

认识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"
  },

webpack 打包配置从0到1

认识webpack

安装webpack

配置webpack

webpack中loader的使用

最常用的loader：

1. 样式loader

2.图片处理loader

Vue Loader

webpack plugin的使用

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

2.HtmlWebpackPlugin

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

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

webpack中配置vue

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

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

webpack 打包配置 从0到1

认识webpack

安装webpack

配置webpack

webpack中loader的使用

最常用的loader：

1. 样式loader

2.图片处理loader

Vue Loader

webpack plugin的使用

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

2.HtmlWebpackPlugin

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

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

webpack中配置vue

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

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

webpack 打包配置从0到1

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