阅读 1129

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项目。