webpack基础教程（简单使用）

最新推荐文章于 2022-11-23 00:59:20 发布
最新推荐文章于 2022-11-23 00:59:20 发布
阅读量1.2k 收藏 4
点赞数
文章标签： webpack js npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42357338/article/details/110304874
版权

目录

 

一 、webpack是什么？

二、 安装webpack

 三、webpack基本打包命令

1. webpack起步

2. webpack打包js

3. webpack编译es6 

4. webpack提取公共代码（多页面应用） 

 5. webpack单页面解决方案–代码分割和懒加载

6. webpack处理CSS

 7. webpack处理SCSS

一 、webpack是什么？

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。（本文以webpack4为准）

二、 安装webpack

首先确保本地环境支持node.js，再使用npm安装webpack，如果觉得npm安装速度慢，可使用淘宝镜像及其命令cnpm

  • 全局安装webpack命令行如下
  • npm install webpack -g
  • 项目安装webpack命令行如下
  • npm install webpack --save-dev

 三、webpack基本打包命令

1. webpack起步

  • 新建一个项目目录webpack，在目录下添加main.js文件，代码如下：
document.write("哈哈哈哈哈哈哈哈哈哈");
  • 在webpack目录下添加index.html文件，代码如下：
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>
  • 接下来使用webpack命令来打包，命令如下
webpack main.js bundle.js
  • 执行以上命令会编译main.js文件并生成bundle.js文件，打开index.html，会显示“哈哈哈哈哈哈哈哈哈哈”

2. webpack打包js

  • 新建项目demo01，在demo01底下新建文件夹vendor，在vendor文件夹底下新建sum.js文件，使用ES6模块导出，代码如下
export default function(a, b) {
  return a + b;
}
  • 在demo01底下新建app.js文件，作为项目的入口文件，代码如下
/**
 * webpack支持ES6、CommonJs和AMD规范
 */

// ES6
import sum from "./vendor/sum";
console.log("sum(1, 2) = ", sum(1, 2));
  • 在demo01文件夹底下新建webpack.config.js文件，进行打包配置，代码如下：
/**
 * 必须使用CommonJs规范
 * 更多高级用法：https://www.webpackjs.com/concepts/output/
 */

const path = require("path");

module.exports = {
  entry: {
    app: "./app.js"
  },
  output: {
    publicPath: __dirname + "/dist/", // js引用路径或者CDN地址
    path: path.resolve(__dirname, "dist"), // 打包文件的输出目录
    filename: "bundle.js"
  }
};
  • 怎么运行呢，首先，得安装webpack，具体安装命令见上文，再使用npm init -y生成package.json文件，配置script，代码如下，再使用npm run build 进行打包。最后项目底下会生成一个文件夹dist，文件夹里有打包后的文件bundle.js，至此打包js完成。
{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "webpack-cli": "^4.1.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC"
}
  • 打包后的目录结构

3. webpack编译es6 

  • 说到编译ES6，就不得不提到和babel相关的技术生态，具体情况如下：
    babel-loader: 负责 es6 语法转化
    babel-preset-env: 包含 es6、7 等版本的语法转化规则
    babel-polyfill: es6 内置方法和函数转化垫片
    babel-plugin-transform-runtime: 避免 polyfill 污染全局变量
    这里需要注意的是:babel-loader和babel-polyfill，前者负责语法转化，比如：箭头函数啥的，后者负责内置方法和函数，比如 new Set()
  • 所以webpack要编译ES6，第一步得安装相关的库，这次，package.json文件配置如下：（记得npm install）
{
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "webpack": "^4.15.1"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "babel-runtime": "^6.26.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  }
}
  • 在webpack中使用babel，babel的相关配置，单独写在.babelrc文件中，相关配置如下：
{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": ["last 2 versions"]
        }
      }
    ]
  ],
  "plugins": ["transform-runtime"]
}
  • 在webpack配置文件中，关于babel的调用需要写在module模块中。对于相关的匹配规则，除了匹配js结尾的文件，还应该去除node_module文件夹下的第三方库。

 /* 相关步骤：
 *    1 安装相关库
 *    2 在webpack中使用babel，babel的相关配置，单独写在.babelrc中
 *    3 在webpack配置文件中，关于Babel的调用需要写在module模块中
 *    4 babel-polyfill它需要在我们项目的入口文件中被引入（这里使用这种），或者在webpack.config.js中配置。
 */
module.exports = {
  entry: {
    app: "./app.js"
  },
  output: {
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        // 这里应该除去node_modules文件夹下的第三方库文件
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader" // 转化需要的loader
          // options选项配置在: .babelrc
          // options: {
          //   ...
          // }
        }
      }
    ]
  }
};
  • 项目入口文件app.js，在这里我们要引入babel-polyfill，具体代码如下：
import "babel-polyfill";
let func = () => {};
const NUM = 45;
let arr = [1, 2, 4];
let arrB = arr.map(item => item * 2);

console.log(arrB.includes(8));
console.log("new Set(arrB) is ", new Set(arrB));
  • 安装完webpack之后，使用npm run build进行打包，会生成dist文件夹，及bundle.js，到此es编译打包结束。可以在html文件中引用打包后的文件，打开html文件即可查看效果。打包后的目录结构如下图所示：
    在这里插入图片描述
  •  

4. webpack提取公共代码（多页面应用） 

  • 首先，先在src文件夹下创建 pageA.js 和 pageB.js分别作为两个入口文件。同时，这两个入口文件同时引用subPageA.js,subPageB.js，而subPageA.js,subPageB.js又同时引用module.js文件。
    项目基本结构如下：
    在这里插入图片描述
  • module.js代码如下：
export default "module";
  • subPageA.js:导入公共模块module
import "./module";
export default "subPageA";
  • subPageB.js:导入公共模块module
import "./module";
export default "subPageB";
  • 最后封装入口文件，pageA.js
import "./subPageA";
import "./subPageB";

import * as _ from "lodash";
console.log("At page 'B' :", _);

export default "pageA";

pageB.js:

import "./subPageA";
import "./subPageB";

import * as _ from "lodash";
console.log("At page 'A' :", _);

export default "pageB";
  • 然后编写package.js配置文件，代码如下：
{
  "devDependencies": {
    "webpack": "^4.15.1"
  },
  "dependencies": {
    "lodash": "^4.17.10"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  }
}
  • 最后编写webpack配置文件，进行打包配置，具体代码如下：
const webpack = require("webpack");
const path = require("path");

module.exports = {
  // 多页面应用
  entry: {
    pageA: "./src/pageA.js",
    pageB: "./src/pageB.js"
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    chunkFilename: "[name].chunk.js"
  },
  // 着重看这个配置，将需要打包的代码放在 cacheGroups属性中
  optimization: {
    splitChunks: {
      cacheGroups: {
        // 注意: priority属性
        // 其次: 打包业务中公共代码，每个键值对就是被打包的一部分，
        //       针对第三方库通过设置priority来让其先被打包提取，最后再提取剩余代码
        common: {
          name: "common",
          chunks: "all",
          minSize: 1,
          priority: 0
        },
        // 首先: 打包node_modules中的文件
        vendor: {
          name: "vendor",
          test: /[\\/]node_modules[\\/]/,
          chunks: "all",
          priority: 10
          // enforce: true
        }
      }
    }
  }
};
  • npm install 之后，使用npm run build 进行打包，打包后的项目目录结构如下图所示：
    在这里插入图片描述

 5. webpack单页面解决方案–代码分割和懒加载

  • 针对单页应用提取公共代码需要通过代码分割和懒加载
  • 代码分割和懒加载是通过代码写法来实现（见下文page.js代码），并不是通过webpack配置来实现
  • 此demo的package.json代码如下:
{
  "devDependencies": {
    "webpack": "^4.15.1"
  },
  "dependencies": {
    "lodash": "^4.17.10"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  }
}
  • 公共模块module.js：
export default "module";
  • subPageA.js:
import "./module";
console.log("I'm subPageA");
export default "subPageA";
  • subPageB.js:
import "./module";
console.log("I'm subPageB");
export default "subPageB";
  • page.js:重点代码在这里
/**
 * requir.ensure(): 只是加载并不执行
 * import(): 加载并且自动执行
 */

import(/* webpackChunkName: 'subPageA'*/ "./subPageA").then(function(subPageA) {
  console.log(subPageA);
});

import(/* webpackChunkName: 'subPageB'*/ "./subPageB").then(function(subPageB) {
  console.log(subPageB);
});

import(/* webpackChunkName: 'lodash'*/ "lodash").then(function(_) {
  console.log(_.join(["1", "2"]));
});

export default "page";
  • webpack配置文件如下:
const webpack = require("webpack");
const path = require("path");

module.exports = {
  entry: {
    page: "./src/page.js" //
  },
  output: {
    publicPath: __dirname + "/dist/", 
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    chunkFilename: "[name].chunk.js"
  }
};
  • 使用npm run build命令进行打包，打包后的项目目录如下：

在这里插入图片描述

6. webpack处理CSS

在这里插入图片描述

  • 项目依赖如下：
{
  "devDependencies": {
    "css-loader": "^1.0.0",
    "file-loader": "^1.1.11",
    "style-loader": "^0.21.0"
  },
   
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  }
}
  • base.css:
*,
body {
  margin: 0;
  padding: 0;
}
html {
  background: red;
}
  • app.js:
let clicked = false;
window.addEventListener("click", function() {
  if (!clicked) {
    // 加载css样式文件
    import("./css/base.css");
  }
});

// style-loader/useable：
// 可以直接使用use()或者unuse()方法来加载/卸载CSS样式
//
// import base from "./css/base.css";
// var flag = false;
// setInterval(function() {
//   if (flag) {
//     base.unuse();
//   } else {
//     base.use();
//   }
//   flag = !flag;
// }, 500);
  • css.transform.js:
// transform 选项是在import css样式后执行的
module.exports = function(css) {
  console.log(css);
  return window.innerWidth < 1000 ? css.replace("red", "green") : css;
};
  • webpack配置文件如下
const path = require("path");

module.exports = {
  entry: {
    app: "./src/app.js"
  },
  output: {
    publicPath: __dirname + "/dist/",
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // css处理为style标签
        use: [
          {
            loader: "style-loader",
            options: {
              singleton: true,
              transform: "./css.transform.js"
            }
          },
          {
            loader: "css-loader",
            options: {
              minimize: true
            }
          }
        ]
        // css处理为link标签
        // use: [
        //   {
        //     loader: "style-loader/url"
        //   },
        //   {
        //     loader: "file-loader"
        //   }
        // ]
        // css卸载和加载样式(use与unuse方法)
        // use: [
        //   {
        //     loader: "style-loader/useable"
        //   },
        //   {
        //     loader: "css-loader"
        //   }
        // ]
      }
    ]
  }
};
  • 使用npm run build命令打包，项目打包后的目录如下：
  • 在这里插入图片描述

 7. webpack处理SCSS

在这里插入图片描述

  • 项目所需依赖如下:
{
  "devDependencies": {
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "node-sass": "^4.9.2",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  }
}
  • base.scss:
$bgColor: red !default;

*,
body {
  margin: 0;
  padding: 0;
}

html {
  background-color: $bgColor;
}
  • 在app.js中导入scss文件：
import "./scss/base.scss";
  • 配置webpack：注意loader顺序，不能颠倒，只有通过css-loader处理css之后才能通过style-loader，指定多个loader时的顺序是固定的，而调用loader的顺序是从前往后解析的。
const path = require("path");

module.exports = {
  entry: {
    app: "./src/app.js"
  },
  output: {
    publicPath: __dirname + "/dist/",
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        // 注意 loader 顺序，不能颠倒
        use: [
          {
            loader: "style-loader" // 将 JS 字符串生成为 style 节点
          },
          {
            loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
          },
          {
            loader: "sass-loader" // 将 Sass 编译成 CSS
          }
        ]
      }
    ]
  }
};
  • 使用npm run build打包，打包后的文件结构如下：
    在这里插入图片描述
April Gemini
关注
webpack教程
m0_57860459的博客
03-14 1433
前端项目构建打包工具介绍 (一) webpack配置-入口和出口 (二) loader配置 (三) plugins(插件) (四) vue2.x中的webpack配置 (五) resolve别名配置和文件后缀配置 (六) 跨域配置 (七) 其他前端构建打包工具 前端项目构建打包工具介绍# 为什么需要这些项目构建打包工具 项目构建打包工具有哪些 webpack介绍 是一款打包构建工具,目前就流行打包构建工具 webpack特点: 一切皆模块, 能把所有资源打
Webpack简易教程
08-10
这只是Webpack基础入门的冰山一角，实际项目中还需要配置解决模块路径（resolve）、优化（optimization）、多环境支持（webpack-merge）、热更新（Hot Module Replacement）等更多高级特性。继续深入学习，你将能够...
入门 Webpack，看这篇就够了
weixin_33813128的博客
08-05 1010
2018年8月25日更新，目前 webpack 已经更新值 4.17.1 ，本文所用到的各种库或多或少有些过时，跟着代码操作下来可能会遇到各种问题，不过 webpack 的主体思想没变，所以还是希望本文对新学 webpack 的你，有所帮助。此外用基于 webpack 4.17.1 写了一个简单的demo，如果遇到啥问题，可以参考，之后应...
webpack基础入门
weixin_30642561的博客
02-03 140
我相信，有不少的朋友对webpack都有或多或少的了解。网上也有了各种各样的文章，文章内作者也写出了不少自己对于webpack这个工具的理解。在我刚刚接触webpack的时候，老实说，网上大部分的文章我是看不懂的。。webpack里面有很多名词，是没有接触和理解过模块化的同学都难以理解的。我感觉，学习任何一项新技术，要弄清楚为什么使用它，它是什么，它有什么用等概念，弄清楚这些概念之后，我相信，在日...
webpack基础知识
qq_48439911的博客
07-19 302
webpack基础使用，webpack的插件，webpack中的loader,打包发布操作，Source Map代码报错提示
webpack基础
qq_60139105的博客
04-24 307
本质上，webpack 是一个用于现代 JavaScript 应用程序的_静态模块打包工具_。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。 2. ...
webpack入门教程
11-10
### webpack入门教程 #### 一、什么是webpack？ webpack 是现代 JavaScript 应用程序的一个模块打包器。它将多个模块和资源文件打包成一个或多个 bundle 文件，这些文件可以在浏览器环境中运行。通过 webpack，...
simple-webpack:简单的Webpack 3入门教程
05-16
这是一个简单的webpack 3教程，可以帮助您熟悉webpack的基础知识。 要求 Node.js 设置 npm install 建造 npm run build开发模式 npm run build:prod进入生产模式 构建命令从./src文件夹构建我们的简单应用程序，...
webpack教程之webpack.config.js配置文件
12-09
通过这个简单的示例，你了解了如何设置 `webpack.config.js` 文件，以及如何使用 `html-webpack-plugin` 插件自动化生成 HTML 文件。这只是一个基础配置，实际上，Webpack 配置可以非常复杂，包括代码分割、热模块...
简单使用webpack打包文件的实现
10-16
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会递归地构建一个依赖图（dependency graph），其中包含...但这个基础教程足以帮助你开始使用 webpack 进行简单的文件打包。
webpack使用教程
qq_40096030的博客
03-04 5648
webpack使用教程webpack是什么为什么要使用webpackwebpack的五个核心概念开始使用打包样式资源插件打包图片资源devServer打包优化提取css文件压缩css性能优化优化代码调试 webpack是什么 本质上，webpack 是一个用于现代 JavaScript 应用程序的_静态模块打包工具_。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。 以上解释截图自官
Webpack教程
weixin_48333948的博客
11-18 179
什么是Webpack Webpack是一个模块打包器，它的主要目标是将JavaScript文件打包在一起，打包后的文件用于在浏览器中使用。 ----Webpack中文文档 使用步骤 安装 npm install --save-dev webpack npm install --save-dev webpack-cli 这两行命令会为你的项目安装webpack和webpack-cli包，前者是webpack的核心库，后者是分离出来的webpack命令行功能，我们需要使用webpack-cli来进行项目
webpack入门教程(基础)
liuqiao0327的专栏
05-07 459
webpack入门教程一 文章目录webpack入门教程一1.概念2.安装webpack1.全局安装2.局部安装3.webpack 4个核心概念1.entry(入口)2.output(出口)3.loader(转换器)4.plugins(插件)5.webpack 模式4.使用webpack1.初始化2.局部安装webpack3.逐渐安装loadera.将es6语法转为浏览器识别的es5语法b. 将...
webpack 基础
qq_54422936的博客
09-15 875
webpack基础
webpack的基础
最新发布
c_l_a_n_n_d的博客
11-23 194
webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
webpack loader教程：删除console.log
"这篇教程介绍了如何使用webpack的loader来删除代码中的console语句，特别针对webpack 3版本，因为webpack 4已经内置了类似功能。文章首先解释了webpack的功能，即把不同类型的文件打包成浏览器可执行的代码，并强调...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值