webpack总结（上）

小徐今天学习了吗
113 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第23天，点击查看活动详情。

webpack介绍

webpack 是一个现代 javascript 应用程序的 静态模块打包器 (module bundler)。vue-cli 脚手架环境, 集成了 webpack, 所以才能对各类文件进行打包处理。

webpack能做的事情有：

  1. 语法转换

    • less/sass转换成css
    • ES6转换成ES5
    • ...

  2. html/css/js 代码压缩合并 (打包)

  3. webpack可以在开发期间提供一个开发服务器

webpack的基本使用

webpack 打包演示

  1. 建目录 dist src/main.js

  2. 初始化

     yarn init -y

  3. 安装依赖包 ( -D: 将安装包作为开发阶段的依赖, 只在开发阶段使用, 实际上线不要的, 可以加 -D)

    dependencies 项目依赖, 实际上线, 也要用的包, 比如 jquery yarn add jquery

    devDependencies 开发依赖, 实际上线, 不用这个包, 只在开发打包过程中用 -D

     yarn add webpack  webpack-cli  -D

  4. 配置scripts

     scripts: {
     "build": "webpack --config webpack.config.js"
 }

    --config webpack.config.js 这个配置文件名为默认值, 不加也会默认找这个文件

  5. 提供 webpack.config.js

  6. 运行打包命令

 yarn build

npm中scripts的使用

在package.json文件中, 可以配置 scripts ... 配置自己的命令。

"scripts": {
	"aa": "yarn add jquery",
	"build": "webpack --config webpack.config.js"
}

yarn xxx
npm run aa
npm run build

运行方式: npm run xx

特殊的命令: start / stop 可以省略 run。

npm run start  => npm start      =>  yarn start
npm run stop  => npm stop        =>  yarn stop

使用 yarn 直接不需要加 run。

npm run aa  =>  yarn aa
npm run build => yarn build

自动生成html - html-webpack-plugin 插件

目前我们都是在 index.html 中手动引入打包后的资源，这种引入方式是有缺点的,

将来上线需要把 index.html 和 dist 目录合到一起, 且目录引入也有问题, 需要改导入的路径

所以一般会用一个插件, 会自动将 public 中的 index 拷贝到 dist下, 并自动引入打包后的文件。

  1. 下载

     yarn add html-webpack-plugin  -D

  2. 在webpack.config.js文件中，引入这个模块 :

     // 引入自动生成 html 的插件
 const HtmlWebpackPlugin = require('html-webpack-plugin')

  3. 配置

     plugins: [
   new HtmlWebpackPlugin({ template: './public/index.html' })
 ]

配置好了之后, public 目录的 index.html 就不需要引入打包后的文件了, 会自动被插件生成 html 引入

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

<div id="app">
  <!-- ul>li{我是第$个li}*10 -->
  <ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
    <li>我是第6个li</li>
    <li>我是第7个li</li>
    <li>我是第8个li</li>
    <li>我是第9个li</li>
  </ul>
</div>

<!-- 打包后的文件会被自动引入, 不需要手动引入了 -->
</body>
</html>

webpack - loaders 的配置

webpack默认只认识 js 文件和 json文件, 但是webpack 可以使用 loader 来加载预处理文件, 允许webpack也可以打包 js之外的静态资源。

所以webpack如果要处理其他文件类型, 记得要先配置对应的 loader

webpack中处理 css 文件

需求: 去掉小圆点, 新建 css 目录

  1. 安装依赖

     yarn add style-loader css-loader -D

  2. 配置

     module: {
   // loader的规则
   rules: [
     {
       // 正则表达式，用于匹配所有的css文件
       test: /.css$/,
       // 先用 css-loader 让webpack能够识别 css 文件的内容
       // 再用 style-loader 将样式, 以动态创建style标签的方式添加到页面中去
       use: [ "style-loader", "css-loader"]
     }
   ]
 },

webpack 中处理 less 文件

  1. 下载依赖包

    注意: 解析less文件需要识别 less 语法, 所以除了 less-loader 需要额外下载 less 包

    less-loader: 将less转换成 css

     yarn add less  less-loader  -D

  2. 配置

     module: {
   // loader的规则
   rules: [
     {
       // 正则表达式，用于匹配所有的css文件
       test: /.css$/,
       // 先用 css-loader 让webpack能够识别 css 文件的内容
       // 再用 style-loader 将样式, 以动态创建style标签的方式添加到页面中去
       use: [ "style-loader", "css-loader", 'less-loader']
     }
   ]
 },
avatar
文章
阅读
粉丝