Webpack 基本操作

吐槽

• 我在学习Webpack的时候，我看的视屏是Webpack3.0版本，差不多应该是17年的视屏，而现在是Webpack4.0版本，哎呀我去，那区别是真的大，一起步就摔倒，真的是一步一个坑，步步皆是坑，可见这版本之间相差还是蛮大的。其实我也有想过去看Webpack最新教程，但是想想还是算了，应该只是一点点区别而已，鬼知道步步是坑啊，呜呜呜~ 哭辽 ~，就这样我不停百度，把坑都填好了，就这样，我磕磕碰碰的完成了Webpack的学习。当然过程还是学到了很多的。
• 下面就是我根据百度的东西以及自己的见解，写的一个简单的Webpack操作。当然小白的我还是借鉴了一些前辈们的经验，在此谢谢各位前辈们。

概述

前言

我们在开发项目时，会用到很多的静态资源，我们在浏览器，浏览网页时，网页加载的速度就会变慢，而且有很多的文件都是相互依赖的。

• 总结
  1. 网页加载速度慢， 因为 我们要发起很多的二次请求
  2. 要处理错综复杂的依赖关系
• 如何解决
  1. 合并、压缩、精灵图、图片的Base64编码
  2. requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系

webpack是什么呢

webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具

• 借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。
• 下图：看左边许多的文件，文件与文件之间又存在关系，经过webpack打包之后，就形成了右边的样子，文件少，还无依赖。
  
• 从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
• webpack中文网

Webpack的安装

1. 运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
2. 在项目根目录中运行npm i webpack --save-dev安装到项目依赖中

项目初始化

• 创建如下目录结构
  
• 初始化项目，会在项目的根目录下生成一个package.json文件

  npm init -y 

• 安装webpack和webpack-cli（webpack4.0以后需要单独安装）

  npm install webpack webpack-cli --save-dev 

  安装完成后，你会找到node_modules.binwebpack

• 查看package.json文件
  
• 编写index.js，简单写一句输出语句即可

  console.log("ok"); 

打包测试

• 输入打包命令

  webpack ./src/index.js -o ./dist/bundle.js 

  在webpack4.0以后，打包命令需要加-o，不然回报如下错误
  

• 成功，你会发现 dist 目录下多了一个main.js的文件
  

• 在index.html中引入 dist 目录下的main.js文件

  <script src="../dist/main.js"></script> 

• 打开浏览器后，运行index.html，F12打开控制台，输出ok就行

• 编写webpack.config.js文件

  const path = require('path');  module.exports = {     // 配置入口（要打包的文件）     entry: path.join(__dirname, './src/index.js'),     // 输出文件相关配置     output: {         // 配置出口，指定打包好的文件存放路径         path: path.join(__dirname, './dist'),         // 要输出的文件名         filename: 'main.js'     },     mode: 'development' } 

• 直接输入webpack命令即可

• 你或许会遇见下面的黄色警告
  

  黄色警告:是因为webpack4引入了模式,有开发模式,生产模式,无这三个状态
  可以看到末尾并没有生成我们所打包的main.js的信息
  黄色部分的警告的意思是，没有设置模式,有开发模式和生产模式两种，

  • webpack.config.js添加属性：mode: 'development'

样式的处理

普通CSS处理

• 首先在CSS目录下新建一个index.css文件，写点样式

  body { background-color: green; } 

• 在index.js文件中，将css引入

  import './css/index.css'; 

• 此时我们打包后，会报下面错误
  
  

  You may need an appropriate loader to handle this file type,
  currently no loaders are configured to process this file.
  它的意思是说：没有一个合适的加载器

• 这时我们需要安装第三方loader加载器
  • css-loader：用于处理 css 文件，使得能在 js 文件中引入使用；
  • style-loader：用于将 css 文件注入到 index.html 中的 <style> 标签上；
  • 安装命令

    npm i style-loader css-loader --save-dev 

• webpack.config.js中，配置第三方匹配规则

  // 配置第三方模块 module: {  // 配置匹配规则  rules: [   {    test: /.css$/,  // 匹配以后缀为.css的文件    use: ['style-loader', 'css-loader']   }  ] } 

  • test: 是一个正则表达式
  • use: 对应处理的 loader 插件名称（处理顺序是从右往左）
• 打包测试
• 可以看到样式已经添加到<style>标签中了，且背景已经绿了
  

sass处理

• 在 css 目录中，新建一个index.scss文件

  body {     div {         width: 250px;         height: 250px;         border: 2px solid #000;         margin: 10px;     }     #a {         font-size: 20px;     }     #b {         color: red;     } } 

• 在index.html中，添加如下

  <div id="a">aaaaaa</div> <div id="b">bbbbbb</div> 

• index.js引入index.scss文件

  import './css/index.scss'; 

• 安装node-sass和sass-loader

  npm i node-sass sass-loader --save-dev 

• webpack.config.js，配置module.rules匹配规则

  {  test: /.scss$/,  use: ['style-loader', 'css-loader', 'sass-loader'] } 

• 打包测试
• 打开F12后，已经成功了
  （别问我为什么不截效果图，因为效果图…好丑…）
  

less处理

• 在 css 目录中，新建一个index.less文件

  body {     div {         color: #fff;     } } 

• index.js引入index.less

  import './css/index.less'; 

• 安装less和less-loader

  npm i less less-loader --save-dev 

• webpack.config.js中，配置module.rules匹配规则

  {  test: /.less$/,  use: ['style-loader', 'css-loader', 'less-loader'] } 

• 打包测试
• F12查看，看得出来，成功了
  

开启 SourceMap

• 先注释掉这些东西
  
• 在index.js中

  console.loo("ok"); 

  别怀疑，对，就是console.loo()，很明显，这个是一个错误的语句。

• webpack.config.js中，开启 source-map

  module.exports = {  // ...     devtool: 'source-map', // 开启 source-map  // ... } 

• webpack.config.js中，module.rule 配置如下

  rules: [  {   test: /.(sc|sa|le|c)ss$/,   use: [    "style-loader",    {     loader: 'css-loader',     options: {sourceMap:true}    },    {     loader: 'sass-loader',     options: {sourceMap: true}    },    {     loader: 'less-loader',     options: {sourceMap: true}    }   ]  } ] 

• 打包测试，打包信息多了条信息，在dist目录下，多了个main.js.map文件，这个文件里面是映射的对应关系
  
• 可以发现，具体的报错信息以及定位，一目了然
  
• 来看看CSS的
  

处理图片

• 安装url-loader和file-loader

  npm i url-loader file-loader --save-dev 

• webpack.config.js中，配置module.rules

  rules: [  {   test: /.(png|jpg|gif|bmp|jpeg)$/,   use: ['url-loader']  } ] 

• 给页面中#a添加一张背景图
• 打包测试
• 查看元素，你会看到一串 Base64 的字符串

  data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEB    ... FFFABRRRQB/9k= 

• 关于url-loader的一些参数

  use: ['url-loader?limit=53251&name=[hash:8]-[name].[ext]'] 

  • limit：当图片大小，大于指定字节数时，就不会转为base64字符串
  • [hash]: 哈希值，共32位
  • [name]: 使用原来名称
  • [ext]: 使用原本后缀

安装 webpack-dev-server

• 作用：我们每次只要把文件修改一下，就需要进行重新打包，这样非常麻烦，而webpack-dev-server就是为此诞生的。
• 安装

  npm i webpack-dev-server --save-dev 

• 打开package.json，配置scripts，如下

  "scripts": { // ... "webpack-dev-server": "webpack-dev-server" // ... }, 

  key可以随意，你可以直接写成dev，我这样写，也仅仅只是随便记住这个单词，哈哈。

• 运行

  npm run webpack-dev-server 

• 你会看到这两条信息

  i ｢wds｣: Project is running at https://localhost:8080/ i ｢wds｣: webpack output is served from / 

  • 第一条：项目运行地址
  • 第二条：输出文件的位置在/下，也就是项目根目录下
• 修改index.js中的代码，重新刷新浏览器（不用重新打包），也发现没有任何效果，那是因为输出文件被放到项目根目录下了
  修改main.js引入路径

  <!-- 开启 webpack-dev-server 后，输出文件在 项目根目录下 --> <script src="../main.js"></script> 

• 修改webpack-dev-server配置

  "scripts": {  // ...     "webpack-dev-server": "webpack-dev-server --open --port 8888 --contentBase src --hot"  // ... }, 

  • open：自动打开浏览器
  • port：修改端口号
  • contentBase：指定项目运行根目录
  • hot：启用热更新
• 修改完成后，重新打包即可看到效果

webpack-dev-server的第二种配置方式（了解）

• webpack.config.js中，module.exports 配置属性

  devServer: {  open: true,  port: 8888,  contentBase: 'src',  hot: true // 启用热更新的第一步 } 

• 启用热更新第二步，webpack.config.js中，顶部引入

  const webpack = require('webpack'); 

• 启用热更新第三步，webpack.config.js中，module.exports配置属性

  plugins: [  // 创建热更新的模板对象  new webpack.HotModuleReplacementPlugin() ] 

JavaScript 处理

• 有些时候，我们写的ES6代码，浏览器并不支持，所以需要将ES6的代码，转为更低级的，浏览器可以识别的。

• index.js编写一段ES6代码

  class Person {     static info = {         name: '小灵',         age: 17     } } console.log(Person.info); 

• 安装相关包

  cnpm i babel-loader @babel/core @babel/preset-env -D cnpm i @babel/plugin-proposal-class-properties -D 

• webpack.config.js配置如下，配置module.rules

  rules: [ {   test: /.js$/,   use: {    loader: 'babel-loader',    options: {        presets: ['@babel/preset-env'],        plugins: ['@babel/plugin-proposal-class-properties'] } },   exclude: /node_modules/ } ] 

  • options这一块可以移到项目根目录的.babelrc文件

    {     "presets": ["@babel/env"],     "plugins": ["@babel/proposal-class-properties"] } 

• 执行 npm run webpack-dev-server

vue 组件处理

• 安装vue-loader和vue-template-compiler

  cnpm i vue vue-loader vue-template-compiler -D 

• index.js导入Vue

  import Vue from 'vue'; 

• 因为导入的Vue，功能不完善，只提供了 runtime-only 的方式，默认是导入dist/vue.runtime.common.js的，所以需要修改一下
  • 直接修改路径

    import Vue from '../node_modules/vue/dist/vue.js' 

  • 也可以在webpack.config.js中添加如下（推荐）

    module.exports = { // ...  resolve: {   alias: { "vue$": "vue/dist/vue.js" } } // ... } 

• webpack.config.js中，在 vue-loader 15.* 之后，要添加如下

  const vueLoaderPlugin = require('vue-loader/lib/plugin'); 

• webpack.config.js中，plugins 配置如下

  module.exports = { // ...  plugins: [ new vueLoaderPlugin() ] // ... } 

• 创建App.vue组件
  注意：在.vue组件中，只能有<template>、<script>、<style>三样标签

  <template>  <h1>App 组件</h1> </template>  <script>  </script>  <style>  </style> 

• webpack.config.js中，module.rules 配置属性

  rules: [ {test: /.vue/, use: 'vue-loader'} ] 

• index.html添加如下

  <div id="app"></div> 

• 导入index.js中导入App.vue组件

  import App from './js/App.vue'; 

• index.js中，创建Vue实例对象

  var vm = new Vue({     el: '#app',     render: function(createElements) { return createElements(App); } }); 

• [Vue warn]: Cannot find element: #app
  • 是因为页面还没加载完，所以找不到此元素，我们直接把<script>引入放到低端即可

路由 router

• 安装vue-router

  cnpm i vue-router -D 

• index.js如下

  import Vue from 'vue'; import VueRouter from 'vue-router' // 手动安装 VueRouter Vue.use(VueRouter); // 导入 login 组件 import login from './js/login.vue' // 创建路由对象 var router = new VueRouter({     routes: [ {path: '/login', component: login} ] }); var vm = new Vue({     el: '#app',     render: els => els(App),     router }); 

export default 和 export

ES6中的导入和导出

• 导入：
  1. import 模块名称 from 模块标识符
  2. import 路径
• 导出：
  1. export default
  2. export
• 注意：
  1. export default 此方式导出，外部可以使用任意变量接收
  2. export default 同一个模块中，只允许导出一次
  3. export 此方式导出，外部必须严格按照导出的指定的变量名接收
  4. export 外部使用 { 导出的变量名, … } 的形式接收
  5. export 外部可以设置别名：{ 导出的变量名 as 别名, … }

Node的导入和导出

• 导入：
  1. var 名称 = require(模块标识符)
• 导出：
  1. module.exports
  2. exports

组件中style标签的 lang 属性 和 scope 属性

• lang：指定CSS的语言，可以是sacc,scss,less等
• scope：不写，则默认样式为全局，反之则局部，它的原理是利用属性选择器

html-webpack-plugin 插件

• 安装

  cnpm i html-webpack-plugin -D 

• webpack.config.js引入

  const htmlWebpackPlugin = require('html-webpack-plugin'); 

• webpack.config.js，module.plugins配置如下

  plugins: [ // 在内存中生成一个 HTML 插件 new htmlWebpackPlugin({ // 指定模板页面   template: path.join(__dirname, './src/index.html'), // 指定生成的文件名   filename: 'index.html' }) ], 

• 打包测试之后，在浏览器中，控制台中，会发现有以VM开头的文件

杂七杂八

本篇源码

链接：https://pan.baidu.com/s/19nKuINk3C_-f3lfpRRUyrw
提取码：y158

import找包的规则：

1. 找项目根目录中有没有node_modules的文件夹
2. 在node_modules 中根据包名，找对应的文件夹
3. 在文件夹中，找到一个叫做 package.json 的包配置文件
4. 在package.json中，找到main属性，属性值是这个包在被加载时的入口文件

–save 可以简写为-S, –save-dev可以简写为-D