webpack搭建vue脚手架环境

一、前端项目搭建

 1. 建立好自己本地的项目目录

 2. 初始化项目的环境 package.json使用的是npm init -y

作用是：依赖清单记录、启动命令、版本信息等，包管理器

3. 安装webpack -- npm i webpack -D （放在开发环境里）

1. 开发环境 -- npm run server --save-dev（--save-dev 缩写 -D ）

运行/生产环境 -- npm run build -S（-S可忽略不写）

2. 如果出现的是 + webpack@5.69.1就是好了  这个时候文件夹里会出现node_modules包和package-lock.json文件

3. package-lock.json这是个锁文件 锁定版本号 如果没有的话 会导致有些依赖匹配不上 项目启动不起来

4. 若node_modules包没了 可以在命令窗执行npm i

4. 安装webpack-cli

npm install --save-dev webpack-cil

5. 运行命令

看package.json里面的 start的启动就是 npm start 如果改成serve 就需要npm run serve

二、webpack

webpack定义

打包工具

webpack特点

默认只能打包js和json文件，其他格式的资源不能直接编译，需要使用loader来处理

 webpack语法

 webpack被node.js运行  webpack使用的是后端的语法 node.js语法百分之98都是js的

 配置webpack 六大部分

1. module 模块 -- loader装载机 用它来处理webpack默认不支持的资源

2. plugins 插件 -- 扩展webpack自身没有的功能

3. entry 入口 -- 指定webpack运行时执行的第一个文件-入口文件

4. output 出口 -- 设置打包后的目录和名称

5. devServer本地服务 -- 功能：npm run serve走的是这里的配置 --使用webpack作为中间件实现代理请求（webpack>node.js运行）-- 启动的本地开发环境，是实时编译在内存

6. mode 模式 -- development开发环境  production生产环境

node.js自带模块

1. 解析路径 -- path

2. 请求 -- http

3. 网络处理 -- net

 devServer安装

1. npm i webpack-dev-server -D

2. 启动命令 -- package.js：serve：webpack serve

loader配置

1. 解析样式

 下载 ` npm i css-loader style-loader -D` 插件

 然后在webpack.config.js中->module->rules配置

 {

  test: /\.css$/,

  use: ["style-loader", "css-loader"],

  },

 2. 解析图片

  `npm i url-loader file-loader -D`

  url-loader执行必须依赖file-loader

 {

  test: /\.(png|jpg|gif|svg|webp|jpeg)$/,

  use: "url-loader",

  },

3. 解析scss

  `npm i  sass sass-loader -D`

{

  test: /\.(scss|sass)$/,

  use: ["style-loader", "css-loader", "sass-loader"],

  },

4. 解析字体

 使用file-loader

5. 编译es6

  `npm install -D babel-loader @babel/core @babel/preset-env`

{

  test: /\.m?js$/,

  exclude: /(node_modules|bower_components)/,

  use: {

  loader: "babel-loader",

  options: {

    presets: ["@babel/preset-env"],

    },

   },

  },

 plugins 插件

  + 扩展webpack自身没有的功能

entry 入口

  + 指定webpack运行时执行的第一个文件，入口文件

 output 出口

+ 设置打包后的目录和名词

 devServer 本地服务

devServer启动的本地开发环境，是实时编译在内存中的，好处就是快速。

 使用vue-loader开发定制版vue项目

  `npm install -D vue-loader vue-template-compiler`

  vue-loader的版本

  自己配置vue脚手架，如果使用vue2版本，则vue-loader版本不能超过15，并且vue和vue-template-compiler的版本号一致

 `npm i vue@2.6.1`

 `npm install -D vue-loader vue-template-compiler@2.6.1 -D`

  2.webpack更新后语法变化

  devServer启动命令变了

  webpack -dev -server

  webpack serve

  devServer里，监听的项目目录api从contentbase变成了static