使用node和webpack打造前端工程化

博主：帆
发布时间：2022 年 05 月 16 日
113 次浏览
暂无评论
18402字数
分类：知识分享 webpack/vite node

这周复习了下之前学习webpack的内容，加深了对webpack打包工具的理解，并作出了较为详细的总结，如果你想对webpack有一定的了解，那么可以仔细阅读这篇文章。

概述

webpack是一个现代的javaScript应用程序的静态模块打包工具，它会根据代码的内容构建一个关系网，解析模块之间依赖，帮助我们把多个模块的代码打包处理。如图，多复杂的文件类型及关系被统一打包成少量浏览器支持的的文件类型。

在这里我们抛出一个疑问：在平常的web开发中，为什么不将工程中的源文件（HTML，CSS, JS）直接发布至服务器或者CDN，而要先交给webpack打包？

为什么要使用webpack

简单的编辑处理已经不能满足当下web应用，当规模较大的应用需要维护时，就必须借助一定的工具。
接上个问题：在web开发过程中的过程中存在着不同的文件类型，统一放在服务器后，因为浏览器不支持某些文件类型（像less，sass等）的原因，导致浏览器不能够正常运行。所以将应用资源存放至服务器时，我们需要webpack对其进行一层打包处理（解析模块之间复杂的关系依赖，文件类型转换），最终形成游览器可运行的文件。

前端模块化

在模块化编程中，开发者将复杂的程序分解为相对独立的代码块，并称之为模块，正如js文件可以是一个模块一样，其他的（css ，image，html）文件也可以视作模块。
在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发，并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。
多个模块之间的导入与导出形成了一张大的关系网，webpack的核心就是处理模块之间的依赖关系。而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。
以ES6模块化为例

//text01.js
export function name() {
    return 'mokuai';
}
export function age() {
    return '10';
}

// text02.js
import { name, age } from './text01.js';
// 在当前文件内使用
console.log(name(), age());

打包

理解了webpack可以帮助我们进行模块化，并且处理模块间的各种复杂关系后，打包的概念就非常好理解了。就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)，并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

webpack安装

webpack唯一的依赖就是node.js,安装webpack首先需要安装Node.js，Node.js自带了包管理工具npm。我们进入node官网后选择安装相应的版本。
查看node版本与npm版本检验是否安装成功。

在这里插入图片描述

接下来我们需要使用Node.js的包管理器来安装webpack，npm安装模块的方式有两种：全局安装与本地安装，对于webpack，我们也有这两种选择。

全局安装webpack的好处npm会帮我们绑定一个命令行环境变量，一次安装，处处运行；本地安装则会添加其成为项目中的依赖，只能在项目内部使用。这里建议使用本地安装的方式，主要有一下两点原因.

如果采用全局安装，那么在与他人进行项目协作的时候，由于每个人系统中的webpack版本不同，可能会导致输出的结果不一致。
部分依赖于webpack的插件会调用项目中Webpack的内部模块，这种情况下仍然需要在项目本地安装Webpack，而如果全局和本地都有，则容易造成混淆。

基于以上两点，我们选择在工程内安装Webpack的方式。

在这里我们先全局安装webpack，后续会本地安装webpack

全局安装webpack（这里我们使用3版本，因为vue - cli 依赖该版本）

npm install webpack@3 -g

在这里插入图片描述

局部安装webpack（切换到当前目录下）

npm install webpack@3 --save-dev

为什么全局安装后，还需要局部安装呢？

在终端执行webpack命令，使用的是全局安装的webpack
在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack。

打包第一个应用

工程文件创建（创建以下文件）

在这里插入图片描述

dist文件夹：用于存放打包之后的文件
src文件夹：用于存放源文件资源
index.html:浏览器打开展示的首页html
main.js:项目的入口文件（下面会详细介绍）
methods.js：定义了一些函数方法，可以在其他地方引用，并且使用。具体内容查看下面的详情。
package.json：通过npm init生成的，npm包管理的文件（暂时没有用上，后面才会用上）使用commonjs的模块化规范

//main.js文件
const people = require('./methods');

console.log("hello , webpack");
console.log(people.name("xiaoming"));
console.log(people.name("age"));

//methods.js文件
function name(str){
  return str
}
function age(str){
  return age
}
module.exports = {
  name,
  age
}

在index.html文件夹中引入JS，控制台无输出,浏览器不认识上述文件中的CommonJS模块化代码

<body>
  hello webpack
  <script src="./main.js"></script>
  <script src="./methods.js"></script>
</body>

JS文件中使用了模块化的方式进行开发，这些JS文件夹在被引入后是不可以直接使用的，因为浏览器并不识别其中的模块化代码。在真实的项目当中有许多这样的js文件，我们一个个引用非常麻烦，并且后期对其管理比较困难，我们应当使用webpack工具对多个JS进行打包,在index.js中引入打包后的文件。
webpack是一个模块化的打包工具，所以它支持我们写模块化的代码，可以对模块化的代码进行处理，处理完模块之间的关系后，将多个js文件打包至一个js文件中去，引入时就变得方便了。
在终端中使用webpack指令打包JS文件（将main.js文件打包至bundle.js文件存放在dist文件夹下）

JS文件的打包

webpack src/main.js dist/bundle.js

在这里插入图片描述

我们可以看到在打包main.js的过程中,methods.js也被打包了，这是因为webpack在打包的过程中会自动处理与main.js存在依赖关系的文件。
打包后会在dist文件下，生成一个bundle.js文件，这时我们在idnex.html文件中引用它。

//index.html(引用打包后的JS文件)
<body>
  hello webpack
  <script src="./dist/bundle.js"></script>
</body>

浏览器输出

在这里插入图片描述

提示：当前JS代码更新需要重新打包进行覆盖，因为index.html文件引用的是打包后的bundle.js文件

入口跟出口

webpack src/main.js dist/bundle.js

在上述命令中，将main.js作为入口文件，bundle.js作为出口文件并使用webpack命令进行打包，从上面例子不难看出每次使用webpack都需要写入入口跟出口作为参数，这样做不仅耗时，而且很容易出错，我们需要创建一个webpack.config.js配置文件，将两个参数写入配置中，在运行时，直接读取。
Webpack的默认配置文件为webpack.config.js(也可以使用其他文件名，需要命令行参数指定)。现在让我们在工程目录下创建webpack.config.js，并添加如下代码

//webpack.config.js
//引入node中的path包，需要通过 npm init初始化项目环境
const path = require('path')
module.exports = {
  // 入口：可以是字符串/数组/对象，这里我们入口只有一个，所以写一个字符串即可
  entry:'./src/main.js',
  //出口：通常是一个对象，里面至少包含两个重要属性，path 和 filename
  output:{
    //__dirname (node中的上下文)
    path:path.resolve(__dirname, 'dist'),//绝对路径
    filename:'bundle.js'//打包后的文件名称                                
  }
}

因为output下的path为绝对路径，所以我们要动态的获取出口path的绝对路径，这里我们需要引入node的语法
在项目中需要单独使用node环境的依赖时，需要通过npm init （在项目中使用node时使用）命令初始化项目。

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "fan",
  "license": "ISC"
}

此时工程文件中会出现一个package.json文件，在项目中需要单独依赖node环境时使用，这个文件描述了当前工程文件的一些信息。
此时的工程文件目录

在这里插入图片描述

此时我们只需要通过webpack命令进行打包

在这里插入图片描述

此时我们只需要通过webpack命令进行打包

在这里插入图片描述

在开发中如果采用全局安装的webpack，那么在与他人进行项目协作的时候，由于每个人系统中的webpack版本不同，可能会导致输出的结果不一致。
部分依赖于webpack的插件会调用项目中Webpack的内部模块，这种情况下仍然需要在项目本地安装Webpack，而如果全局和本地都有，则容易造成混淆。
本地安装webpack

npm install webpack@3 --save-dev(–save-dev是开发时依赖，项目打包后不会继续使用)

安装完成后工程文件内会出现node_modules文件夹（存放包（npm）管理工具下载安装的包的文件夹，webpack被放入其中）

package.json中会出现devDependencies（开发时依赖，本地的webpack版本）

"devDependencies": {
    "webpack": "^3.12.0"
  }

使用本地的webpack打包

在这里插入图片描述

package.json中定义启动

在开发中我们一般不使用webpack命令，而是对其做一层映射
在package.json文件中的script中加入映射关系

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  }

package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置，首先，会寻找本地的node_modules/.bin路径中对应的命令，如果没有找到，会去全局的环境变量中寻找。
此时我们删除dist文件夹中的bundle.js,通过npm run build命令重新打包。

预处理器-loader

loader是webpack中一个非常核心的概念，在我们之前的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。
对于webpack本身的能力来说，对于这些转化是不支持的，我们需要给webpack扩展对应的loader。
loader使用过程：

步骤一：通过npm安装需要使用的loader
步骤二：在webpack.config.js中的modules关键字下进行配置
大部门的loader我们都可以在webpack官网中找到，并使用对应的方法。

CSS文件处理

在src下创建css文件夹并写入normal.css文件

body{
    background-color: pink;
}

使其与工程项目产生依赖关系，这里在main.js写入（只要是在与当前项目产生依赖关系的文件中引入就会被打包）

const {name , age} = require('./js/methods.js');//这里打的methods已被放入js文件夹内

console.log("hello , webpack");
console.log(name("xiaoming"));
console.log(age("18"));
//引入css文件
require('./css/normal.css')

在控制台输入npm run build 命令打包后，控制台报错，根据提示我们需要一个合适的loader来帮助处理当前的css文件。

在这里插入图片描述

我们打开webpack官网寻找对应的loader，根据官网提示进行安装。
官网的版本为最新版本，我们需要安装使用于当前webpack版本的loader，这里我们安装的为3版本的css-loader与1版本的style-loader。

npm install css-loader@3 --save-dev
npm install style-loader@1 --save-dev

开发环境下会显示已经安装好的css-loader

"devDependencies": {
    "css-loader": "^3.6.0",
    "style-loader": "^1.3.0",
    "webpack": "^3.12.0"
 }

然后把 loader 引用到你 webpack 的配置中。如下所示：

css-loader只负责将css文件进行加载
style-loader负责将样式添加到DOM中
css-loader与 style-loader的顺序不能够改变，否则会产生语法错误。
webpack在读取多个loader时，是从右向左读。

module.exports = {
  module: {
    rules: [
      {
        //匹配文件类型
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

让我门重新打包工程文件（注:loader的版本要适用于当前webpack的版本）

打开浏览器我们看到背景颜色发生了改变

在这里插入图片描述

less文件处理

我们希望在项目中使用less、scss、stylus来写样式，webpack是否可以帮助我们处理呢？我们这里以less为例，其他也是一样的。
我们还是先创建一个less文件，依然放在css文件夹中

@fontSize:24px;
@fontColor:red;
body {
  color: @fontColor;
  font-size: @fontSize;
}

安装相应的配置

npm install less-loader@3 less --save-dev

注意：我们这里还安装了less，因为webpack会使用less对less文件进行编译
修改对应的配置文件，添加一个rules选项

{
   test: /\.less$/i,
   loader: [
     // compiles Less to CSS
     'style-loader',
     'css-loader',
     'less-loader',
   ],
 }

打包后效果

在这里插入图片描述

图片文件处理

url-loader

我们在项目中加入两张图片：一张较小的图片test01.jpg(小于8kb)，一张较大的图片test02.jpeg(大于8kb)，我们会针对这两张图片进行不同的处理.

引入图片

body{
  /* 大于8kb的图片 */
  background-image: url(./img/img0.jpg);
  /* 小于8kb的图片 */
  /* background-image: url(./img/img1.jpg); */
  background-color: pink;
}

配置loader

npm install url-loader@3 --save-dev

添加配置

module.exports = {
  module: {
    rules: [
      ...
       {
        test: /\.(png|jpg|gif|jpeg)$/, 
        use: [
          {
            loader: 'url-loader',
            options: {
              当加载的图片小于limit时,会将图片编译为base64字符串形式。
              当加载的图片大于limit时,需要使用file-loader模块进行加载。
              limit: 8192
            }
          }
        ],
      },
    ],
  },
};

打包构建浏览器显示如下

在这里插入图片描述

在浏览中进行检查，我们可以看到png的图片被转换为base64编码格式的图片

在这里插入图片描述

file-loader

我们切换到大于8kb的图片试一试

在这里插入图片描述

打包后发生以上错误，这是因为再打包图片过程中webpack会根据图片的大小来判断使用的loader，这里使用配置中的limit作比较，如果图片小于则使用url-loader，并且将其转换为base64的格式，如果大于limit会使用file-loader来对我们的图片片进行加载，在这里我们安装file-loader

npm install file-loader@3.0.1 --save-dev 这里我们使用3.0.1版本进行兼容

重新打包后，dist文件夹中多了一张通过hash自动生成的图片(为了防止重复)，此时我们打开浏览器发现图片并没有显示，并且出现了如下错误.

我们发现背景图片加载的是dist文件夹下打包后的图片，并不是img文件下的图片,且路径错误，我们需要对打包后的图片进行路径拼接。

module.exports = {
   output:{
    //__dirname node中的上下文对象
    path:path.resolve(__dirname, 'dist'),
    filename:'bundle.js',
    对打包后的url进行拼接
    publicPath:'dist/'
  },
};

我们重新打包后图片在页面中正常显示出来

在这里插入图片描述

修改文件名称

我们发现webpack自动帮助我们生成一个非常长的名字，这是一个32位hash值，目的是防止名字重复。但是，真实开发中，我们可能对打包的图片名字有一定的要求比如，将所有的图片放在一个文件夹中，跟上图片原来的名称，同时也要防止重复。
所以，我们可以在options中添加上如下选项。

{
    test: /\.(png|jpg|gif|jpeg)$/, 
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 8192,
          name: 'img/[name].[hash:8].[ext]'
        }
      }
    ],
  }

img：文件要打包到的文件夹
name：获取图片原来的名字，放在该位置
hash:8：为了防止图片名称冲突，依然使用hash，但是我们只保留8位
ext：使用图片原来的扩展名

但是，我们发现图片并没有显示出来，这是因为图片使用的路径不正确默认情况下，webpack会将生成的路径直接返回给使用者但是，我们整个程序是打包在dist文件夹下的，所以这里我们需要在路径下再添加一个dist/
保存重新打包后，我们会发现目录结构发生了如下改变

在这里插入图片描述

ES6语法处理

如果你仔细阅读webpack打包的js文件，发现写的ES6语法并没有转成ES5，那么就意味着可能一些对ES6还不支持的浏览器没有办法很好的运行我们的代码。

如果希望将ES6的语法转成ES5，那么就需要使用babel，而在webpack中，我们直接使用babel对应的loader就可以了。

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

配置webpack.config.js文件

{
      test: /\.m?js$/,
      //排除node_modules与bower_components 不做转化
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          //配置
          presets: ['es2015']
        }
      }
  }

重新打包，查看bundle.js文件，发现其中的内容变成了ES5语法。

vue文件处理

使用vue的配置过程

在项目中，我们会使用Vuejs进行开发，而且会以特殊的文件来组织vue的组件。

引入vue.js(通过srcipt标签引用源码的一些方式)

<script src ="./vue.js"></script>

在我们的webpack环境中集成Vuejs（通过模块化的方式管理vue），如果在项目中使用Vuejs，那么必然需要对其有依赖，所以需要先进行安装（这里我们安装vue2版本）

npm install vue@2 --save

注：因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖

//index.html
<body>
  <div id="app">{{msg}}</div>
  hello webpack
  <script src="./dist/bundle.js"></script>
</body>

//main.js
import Vue from "vue"(引入node_moudles内的vue依赖)
new Vue({
  el:"#app",
  data:{msg:"标记信息"}
});

重新进行打包，打包过程中没有任何错误（因为只是多打包了一个vue的js文件而已）
运行程序后，浏览器产生报错。

在这里插入图片描述

这个错误说的是我们使用的是runtime-only版本的Vue，什么意思呢？

根据官方解释：
如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版.

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可，我们这里未使用。
当我们打包需要编辑器时，需要使用vue完整版（同时包含编译器和运行时的版本）
因为运行时版本相比完整版体积要小大约 30%，所以应该尽可能使用这个版本。如果你仍然希望使用完整版，则需要在打包工具里配置一个别名.

//webpack.config.js
module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' 
    }
  }
}

根据上述错误提示，只有运行时版本的我们需要带有编辑器（runtime-compiler）的版本也就是使用完整版（写入上述代码解决）
我们再次打包，内容显示出来了，错误提示消失了。

在这里插入图片描述

处理vue文件

创建vue文件

//App.vue
<template>
  <div>
    <h2 class="content">{{msg}}</h2>
  </div>
</template>
<script>
  export default{
    name: "App",
    data(){
      return {
        msg:'nihao'
      }
    }
  }
</script>

<style scoped >
 .content{
   color: bule;
 }
</style>

main.js中引入

import Vue from 'vue'
import App from './vue/App.vue'
new Vue({
  el:"#app",
  template:'<App/>',
  components: {
    App
  },
});

安装处理vue文件配置vue-loader与vue-template-compiler（编译vue模板的包）

npm install vue-loader@13 vue-template-compiler --save-dev

提示：vue-loader14以后版本开始需要插件，这里我们安装14一下的版本

修改webpack.config.js的配置文件：

module.exports = {
   test: /\.vue$/,
   use: ["vue-loader"],
}

重新打包后如下（nihao文本在页面中渲染出来）

插件扩展- plugin

plugin是插件的意思，通常是用于对某个现有的架构进行扩展，webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。

loader与plugin的区别

loader主要用于转换某些类型的模块，它是一个转换器。plugin是插件，它是对webpack本身的扩展，是一个扩展器。

plugin的使用

步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
步骤二：在webpack.config.js中的plugins中配置插件。

添加版权的Plugin

//webpack.config.js
const path  = require('webapck')
module.exports = {
  ...
  plugins: [
    new webpack.BannerPlugin("webpack版权归属甲方")
  ]
}

重新打包程序：查看bundle.js文件的头部，看到如下信息

在这里插入图片描述

打包html的Plugin

目前，我们的index.html文件是存放在项目的根目录下的。我们知道，在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意义了。
所以，我们需要将index.html文件打包到dist文件夹中，这个时候就可以使用HtmlWebpackPlugin插件。 HtmlWebpackPlugin插件可以为我们做这些事情：自动生成一个index.html文件(可以指定模板来生成)将打包的js文件，自动通过script标签插入到body中安装HtmlWebpackPlugin插件

npm install html-webpack-plugin@3.2.0 --save-dev（为了防止高版本报错，这里我们选择3.2.0版本）

使用插件，修改webpack.config.js文件中plugins部分的内容如下：这里的template表示根据什么模板来生成dist文件夹下的index.html

//webpack.config
 const HtmlWebpack = require('html-webpack-plugin')
 plugins: [
    new webpack.BannerPlugin("webpack版权归属甲方"),
    new HtmlWebpack({
      dist文件夹下的index.html的模板文件
      template : 'index.html'
    })
 ]

此时原来的index.html不需要再引入bundel.js文件，插件生成的index文件会复制原来index.html文件模板信息，并帮助引入bundle.js

//最初的html
<body>
  <div id="app">
  </div>
  hello webpack
</body>

插件生成的

//打包后dist文件夹下生成的
<body>
  <div id="app">
  </div>
  hello webpack
  <script type="text/javascript" src="bundle.js"></script>
</body>

另外，我们需要删除之前在output中添加的publicPath属性否则插入的script标签中的src可能会有问题
重新打包后并通过dist文件夹下的html打开如下。

在这里插入图片描述

js压缩的Plugin

在项目发布之前，我们必然需要对js等文件进行压缩处理
这里，我们就对打包的js文件进行压缩我们使用一个第三方的插件uglifyjs-webpack-plugin，并且版本号指定1.1.1，和CLI2保持一致

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

修改webpack.config.js文件，使用插件。

const uglifyJsPlugin = require('uglifyjs-webpack-plugin')
 plugins: [
    new webpack.BannerPlugin("webpack版权归属甲方"),
    new HtmlWebpack({
      dist文件夹下的index.html的模板文件
      template : 'index.html'
    }),
    new uglifyJsPlugin()
]

查看打包后的bunlde.js文件，是已经被压缩过了。

在这里插入图片描述

提示：在项目阶段不使用，方便维护调试，发布阶段时我们进行js文件压缩。

搭建本地服务器

每次打包编译后，我们需要手动打开浏览器，大大降低了开发效率，我们可以搭建一个本地服务器帮助启动。
webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果（修改后的结果放在内存中读取，而不是放在磁盘中读取，这里指的是dist文件夹）。
不过它是一个单独的模块，在webpack中使用之前需要先安装它

npm install --save-dev webpack-dev-server@2.9.1

devserver也是作为webpack中的一个选项，选项本身可以设置如下属性：
contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
port：端口号
inline：页面实时刷新
historyApiFallback：在SPA页面中，依赖HTML5的history模式
webpack.config.js文件配置修改如下：

devServer: {
    contentBase:'./dist',
    inline: true
 }

因为我们是局部安装webpack-dev-server，终端使用此全局命令无效，我们需要在webpack-dev-server所在文件夹下启动此命令，后续再script标签中配置后，会优先再本地寻找。

因为我们是局部安装webpack-dev-server，终端使用此全局命令无效，我们需要在webpack-dev-server所在文件夹下启动此命令，后续再script标签中配置后，会优先再本地寻找。

我们在启动命令前修改App.vue

<template>
  <div>
    <h2 class="content">{{msg}}</h2>
    <h2>测试web-dev-server</h2>
  </div>
</template>

输入命令启动本地服务后，会发现一个本地服务器地址

在这里插入图片描述

我们CTRL+鼠标左键点击打开，页面成功修改（之前我们是通过 npm run build打包构建够，将文件放入磁盘中然后在index内打开，现在是通过启动本地服务器，将更改后的文件放入内存中，通过打开本地服务器地址打开。）

在这里插入图片描述

为了方便启动本地服务，我们可以再配置另外一个scripts：–open参数表示直接打开浏览器

//package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    //在这里执行会优先在本地中寻找,不需要再通过文件夹一层层寻找
    "dev":"webpack-dev-server --open" 
    //--open参数表示启动本地服务后直接代开浏览器
},

此时使用脚本重新启动本地服务

npm run dev

在这里插入图片描述

我们此时修改App.vue中的代码,并进行保存，会发现浏览器内容也发生了更新。

<div>
    <h2 class="content">{{msg}}</h2>
    <h2>测试web-dev-server</h2>
    <h2>修改代码后CTRL+S保存会自动刷新,不需要每次修改后重新启动本地服务</h2>
</div>

在这里插入图片描述

通过在本地服务器上测试没问题后，此时我们在对当前工程文件进行打包，然后部署至目标服务器就可以了。

小结

到这里我们整体上了解了webpack打包的相关内容，我们可以尝试配合不同的框架使用webpack进行打包

最后修改：2023 年 01 月 11 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

22攻略
你写得非常清晰明了，让我很容易理解你的观点。
DianC
想学react又不想学，感觉vue3就已经挺好用的了，开摆（╯...
DianC
你未来一定是非常优秀的前端开发工程师，和你比我菜的离谱，求个学...
特让他也让
名称: Trtyr's Blog友链: https://www...
知名8224
表评论8224

概述

为什么要使用webpack

前端模块化

打包

webpack安装

打包第一个应用

工程文件创建（创建以下文件）

JS文件的打包

入口跟出口

package.json中定义启动

预处理器-loader

CSS文件处理

less文件处理

图片文件处理

url-loader

file-loader

修改文件名称

ES6语法处理

vue文件处理

使用vue的配置过程

处理vue文件

插件扩展- plugin

loader与plugin的区别

plugin的使用

添加版权的Plugin

打包html的Plugin

js压缩的Plugin

搭建本地服务器

小结

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

使用node和webpack打造前端工程化

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款