WebPack基础入门(一):万物皆可webpack

推荐阅读

WebPack基础入门(一):万物皆可webpack

WebPack基础入门(二):React项目配置

WebPack基础入门(三):配置eslint

WebPack基础入门(四):打包优化提升打包速度

WebPack基础入门(五):多环境配置

Webpack基础入门(六):多页面打包

前言

前端技术日新月异的发生着变化,涌现出了很多的框架以UI为主的三大框架(react,vue,angular),与样式相关的less、sass。语法相关的es6 typescript以及npm上面成千上万的第三方工具包,各种可以提高开发效率的新思路和框架层出不穷,但是他们都有一个共同的特点不能够直接运行,必须转换后才能正确运行。WebPack 就是做这件事的,将源代码转换成可以执行的 JavaScript HTML CSS代码。

关于WebPack的内容有很多,我只挑出我常用到的做一下笔记内容,主要有五节内容:

  1. 万物皆可webpack:使用webpack 打包常见的文件
  2. React 项目: 打包React的配置
  3. 打包优化1
  4. 打包优化2: 打包优化分为两节内容,节省打包时间。
  5. 多文件打包:多个文件入口如何配置
四大核心

这是我自己总结的四大核心:

  • entry: 打包的入口文件

  • **output:**打包后输出文件

  • **module:**代码转换;如 less 转换为css,静态资源打包

  • **plugins:**补充modules的不足,webpack本身的大多数特性都使用这个插件接口。这使得webpack更加灵活。

当然了webpack 除了这些还有很多很多十分重要的内容,比如loader,mode,devTool,sourceMap等等,其他内容我们在面都能涉及到。

为什么说这四个是四大核心呢?因为使用这四个内容可以打包我们常见的各种类型文件,接下来我们就试一下吧:

创建项目

在创建项目之前,我们系统需要有node,npm;

再介绍一下npx,在安装npm的时候会自动安装npx,我们安装依赖在本项目中会生成一个node_modules文件夹,使用npx 调用的是本项目的依赖,而不是全局的依赖。

  • npm init 初始化项目
mkdir webpack-demo
cd webpack-demo
npm init -y 
# -y 表示一切默认选择
npm install --save-dev webpack webpack-cli # 可以简写为 npm i -D webpack webpack-cli
# 安装webpack

会在文件夹下生成package.json

  • 创建webpack.config.js 文件

使用npx webpack 就会打包文件,打包配置默认为webpack.config.js,我们创建src 文件夹,所有的文件都在这里面。

  • 开始配置
const path = require('path')

module.exports = {
  entry:'./src/index.js',
  output: {
    filename: '[name].js',
    path: path.resolve(process.cwd(), 'dist'),
  },
}
# 会在项目里面生成 dist 文件夹,把src下面的index文件打包至dist文件夹下,
# entry: 可以写上面的字符串也可以写成对象如下
module.exports = {
  entry:{
    main:'./src/index.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(process.cwd(), 'dist'),
  },
}
# output: [name]表示entry里面的key,这里就表示main,所以 src 下的index 会打包为main文件,如果entry是字符串默认为main
  • index.js
const element = document.createElement("div");
element.className = "custom";
element.innerText = "Hello World";

const dom = document.getElementById("root");
dom.appendChild(element)

# 都能看懂
  • 打包

npx webpack

这里的index.html 是我自建创建的,创建完成后把main.js 引入到html中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
  <script src="./main.js"></script>
</body>
</html>

可以看到我们在js里面写的内容都生效了

  • 使用loader

loader 主要是用来翻译代码的,把代码翻译成浏览器能够运行的源码

上面打包的是js文件所以不需要翻译,如果我们在项目里面用到了图片,less,sass,字体文件呢?

所以就用到了loader,以下loader都需要先安装哦

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].js',
    path: path.resolve(process.cwd(), 'dist'),
  },
  # 这里只举例less-loader,loader 的读取是从右到左的
  module: {
    rules: [{
      test: /\.css$/i,
      use: ['style-loader', 'css-loader'] # css-loader 读取css文件翻译成样式,style-loader把样式生效
    },
      # less,先把less 文件读取为css 文件,在使用css-loader读取为样式,style-loader 把样式生效
    {
      test: /\.less$/i,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true // style.className
          }
        },
        'less-loader',
      ]
    }]
  }
}
  • 使用plugins

以上的操作都是先把文件打包,然后创建一个html,把打包的文件引入到html文件中。十分的麻烦,所以可以使用plugins,在每次打包的时候都生成一个html文件,并把文件引入,不需要我们自己操作。

plugins:是一个数组

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
# 安装插件 npm i -D html-webpack-plugin
module.exports = {
  ...
  plugins:[
    new HtmlWebpackPlugin({
      template: './index.html' // 使用当前目录的index.html为模板,每次打包把打包后的文件引入到模板文件里面,并打包到dist
    }),
  ]
}
结语

这节简单的说了下webpack的打包配置,是webpack打包的就牛一毛,包括本节内容,我也没有说太多,主要是配置,更多内容还需要查看官方文档,这个只属于一个入门级别的。欢迎查看下节打包配置react项目。

原文链接:juejin.im

上一篇:我写了一个青铜版vue
下一篇:[译]只使用 CSS 进行用户追踪

相关推荐

  • 🚀webpack 4 beta — try it today!🚀

    Now that webpack is a #0CJS (Zero Configuration) out-of-the-box bundler, we will lay groundwork in 4...

    3 年前
  • 🔥一步一步的带你走进Webpack4的世界

    前言 webpack是当下最热门的前端资源模块化管理和打包工具,它可以将许多松散的模块按照依赖和规则打包成符号生产环境部署的前端资源,还可以将按需加载的模块进行代码分割。

    9 个月前
  • (独家!)webpack 5 changelog 全文翻译

    ★ webpack 团队于北京时间 10 月 12 日凌晨发布了 v5.0.0-beta.0 版本,本文译自 webpack/changelog-v5。此部分主要面向非插件开发的 webpack 使...

    1 年前
  • 面试必备!webpack 中那些最易混淆的 5 个知识点

    前两天为了优化公司的代码打包项目,恶补了很多 webpack4 的知识。要是放在几年前让我学习 webpack 我肯定是拒绝的,之前看过 webpack 的旧文档,比我们内部项目的文档还要简陋。

    1 年前
  • 面试官:请手写一个webpack4.0配置

    确认过眼神,你还是没有准备秋招的人?时间仓促。自京东6月8号开启管培生的招聘,就意味着秋招的开始。然而你还在等着秋天的到来?今年形势应该更为严峻,随着各大技术(vue,webpack,react,微信...

    2 年前
  • 面向小白的 webpack 配置

    前几天面试,问到 webpack 的插件。虽然知道,但没有记住名字,在这里写个笔记,用来复习。 const path = require('path') module.exports = { ...

    3 个月前
  • 随着WebPACK定义全局变量

    随着WebPACK定义全局变量 ...

    3 年前
  • 阔别两年,webpack 5 正式发布了!

    HI,继 Vue 3 和 React 17 之后,我又来啦!印记中文已经完成了 webpack v5 中文文档的同步及翻译工作,大家可以无缝进行阅读哦。 文档地址请认准:webpack.docsch...

    1 个月前
  • 配置webpack中externals来减少打包后vendor.js的体积

    在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差。为此我们需要减少vendor.js的体积,从本...

    2 年前
  • 配置webpack中dev.env.js、prod.env.js,解决不同命令下项目启动和打包到指定的环境

    前后端分离的项目开发中,我们有开发环境、测试环境、预生产环境和生产环境。 1、开发环境下调试接口的时候,一般都会有好几个接口地址(开发服务器上的,本地的,接口开发人员的,七七八八的接口地址),要根据...

    2 年前

官方社区

扫码加入 JavaScript 社区