Web开发-基础环境配置

最新推荐文章于 2022-03-07 23:36:33 发布

baby_hua

最新推荐文章于 2022-03-07 23:36:33 发布

阅读量287

点赞数

分类专栏： Web前端文章标签： Web开发

本文链接：https://blog.csdn.net/baby_hua/article/details/114316587

版权

Web前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

Web开发-基础环境配置

回炉再造！2021 Vue3.0 前端全家桶学习笔记

web前端职业发展路线

技术范围广，发展速度快，兼容浏览器众多：

核心技术：html css JavaScript（BOM、DOM）
新的技术：html5 css3 ES6
旧框架：jQuery直接操作DOM、BootStrap
新框架：虚拟DOM，Vue、React、AngularJS、微信小程序、WebAPP；
还需要了解一定的Nodejs

通用工具：

NPM：包管理器
WebPack：打包工具
ES6：更高效的语法，相较于ES5变化较大；
axios：异步请求，结合了promise等ES6语法；

npm

内容：

认识npm
安装npm
使用npm工具管理包
了解package.json文件
package.json文件详解
模块的基本应用
npm和yarn的对比和迁移

npm安装

node的包管理器，是Nodejs默认的、以JavaScript编写的软件包管理系统；使用npm来分享和使用代码已经成了前端的标配；可以有效的解决包之间的依赖；

前端静态资源库：可以用来查询安装方式和CDN链接；

npm本身也是基于Nodejs开发的软件，安装完Node后，会默认安装好npm；

npm -v

npm install npm -g // 重新安装npm -g 全局安装后 任意文件夹都可以使用
npm uninstall xxx


cd 指定项目目录
npm install xxx // 当前目录 局部安装

dir // 查看当前目录（window命令）
ls

默认使用地址是国外的，可以使用国内镜像源清华镜像淘宝镜像等，可以提高下载速度：

// 查看镜像的配置结果
npm config get registry 
npm config get disturl


// 搭建环境时，将npm设置成淘宝镜像
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

// 设置当前地址（设置为默认的国外地址）
npm config set registry https://registry.npmjs.org/


// 可以使用淘宝定制的cnpm命令行工具代替默认的npm；
npm install -g cnpm --registry=https://registry.npm.taobao.org


// 使用nrm工具切换淘宝源
npx nrm use tabobao
// 如果之后需要切换回官方源 可使用
npx nrm use npm

npm使用

npm -v // 查看版本 判断npm安装与否
npm install xxx // 安装模块
npm install xxx -g // 全局安装 可以直接在命令行里使用
npm list -g // 查看所有全局安装的模块
npm list vue // 查看某个模块（如vue）的版本号
npm -g install npm@5.9.1 // 更新npm到指定版本
npm install -save xxx // -save可以在package文件的dependencies节点写入依赖
npm install -save-dev xxx // -save-dev会在package的devDependencies节点写入依赖

npm uninstall xxx // 卸载
npm update xxx // 默认更新到最新版本

dependencies节点下的依赖，表示运行时依赖，即生产环境下还需使用的模块；

devDependencies节点下的依赖，表示开发时的依赖，里边的模块是开发时用的，发布时用不到；如自动化构建工具gulp以及压缩css、js等的模块，这些在项目部署后是不需要的；

在package.json目录执行npm install默认会更具配置文件中的dependencies、devDependencies节点信息进行包的初始化模块安装；

package.json配置文件属性解析

name // 包名
version // 包的版本
description // 包的描述
homepage // 包的官网url
author // 包的作者姓名
contributors // 包的其他贡献者姓名
dependencies // 依赖包列表，如果依赖包没有安装，npm会自动将依赖包安装在node_module目录下
repository // 包代码存放的地方的类型，可以是git或svn
main // 指定程序的入口文件，require('moduleName')会加载这个文件；这个字段的默认值是模块根目录下的index.js
keywords // 关键字

关于package.json中配置版本号的说明

5.0.1，表示安装包的指定版本
~5.0.3，表示安装5.0.x中的最新版本
^5.0.3，表示安装5.x.x中的最新版本

使用npm init --yes命令会默认生成一个package.json的配置文件，我们可以在这个基础之上继续进行修改；

{
  "name":"xxx",
  "version":"1.0.1",
  "description":"something",
  "main":"index.js",
  "scripts":{
    "test":"ls"
  },
  "repository":{
    "type":"git",
    "url":"git"
  },
  "keyword":[
    "edu",
    "work",
    "vue",
    "react"
  ],
  "author":"xxx",
  "license":"MIT"
}

包的使用

npm常用命令：（nodejs相关）

使用npm help可以查看所有命令，如 install 和 publish；
使用npm help <command>可以查看某条命令的详细帮助，如npm help install
npm update <package> 更新当前目录node_modules子目录下对应的模块到最新版本
npm update <package> -g 可以把全局安装的对应命令行程序更新至最新版本
使用npm cache clear 可以清空NPM本地缓存，用于对付使用相同版本号发布新版本的人
使用npm unpublish <package>@<version> 可以撤销自己发布过的某个版本的代码
在package.json所在目录使用 npm install . -g 可先在本地安装当前命令行程序，可用于发布前的本地测试；

包的使用：

通过命令行使用 npm 下载和更新包；
没用webpack前，需要搜索整个 node_modules目录来定位包的路径，继而添加到html中；

大多数编程语言都会提供一个文件导入另一个文件代码的机制；但是，js在最初设计时并没有这个特性，因为js原本只是为了在浏览器端运行而设计的，并没有权限获取计算机客户端的文件系统（处于安全考虑）；所以很长一段时间以来，组织多个文件的js代码就是把每个文件下载下来，变量是全局共享的；

CommonJS中很大一部分便是对模块系统的规范
- 使用require语句导入包；
- 新的ES6可以使用import导入包；

// index.js
const $ = require('jquery')
$.ajax...

// test.js
module.exports = 100;

// index.js
let num = require('./test.js');
num;

ES6兼容性解决

兼容表：http://kangax.github.io/compat-table/es6/
支持：IE10+、Chrome、FireFox、移动端、NodeJS
兼容低版本浏览器：
- 在线转换（这种编译会加大页面渲染时间），通过在html中加载一些工具包
- 提前编译（强烈建议这种方式，不影响浏览器渲染时间）
比较通用的兼容性问题解决方案有 babel、jsx、traceur、es6-shim等；

在线转换：

<!-- 在线装换举例：可在不兼容的浏览器上正常运行，如ie9 -->
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://lib.baomitu.com/babel-core/5.8.38/browser.js"></script>
</head>
<body>
<script type="text/babel">
  const name = "learn";
  console.log(name);
</script>
</body>
</html>

提前编译：

使用npm安装 babel-cli包，安装后的查询命令，babel -V；
确定一个待开发的目录，使用 npm 初始化一个项目，使用命令npm init 或 npm init -y；

简单测试：babel提供的编译工具 babel-node，可执行我们写的ES6 js代码，babel-node index.js；

在项目目录下新建文件.babelrc文件，这是babel的配置文件

{
  "presets":["es2015", "stage-2"],//设置转码规则
  "plugins":["transform-runtime"] //设置插件
}

安装需要的库：
- npm install babel-core --save-dev
- npm install babel-preset-es2015 --save-dev
- npm install babel-plugin-tranform-runtime --save-dev
- npm install babel-preset-stage-2 --save-dev
配置package.json：
- "scripts":{"build":"babel src -w -d lib"},
- 表示编译整个src目录并将其输出到lib目录；
- src指代需要转换目录，也就是我们实际编码的文件目录；
- lib指代输出内容存放目录；
- -w即-watch，表示监听文件，实施编译输出；src和lib需要提前创建好；
- 命令行，输入 npm run build即可；

npm竞品yarn的使用

FB和Google等联合推出的新的JS包管理工具，可以弥补一部分npm缺陷；

npm install 慢；
同一项目，多人开发，由于npm安装版本不一致出现的bug；
使用更简洁；

npm install -g yarn
yarn --version
yarn config set registry https://registry.npm.taobao.org -g
// yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

yarn init
yarn install
yarn install --flat  // 安装一个包的单一版本
yarn install --force // 强制重新下载所有包
yarn install --production // 只安装dependencies里的包
yarn install --no-lockfile // 不读取或生成 yarn.lock
yarn install --pure-lockfile // 不生成 yarn.lock

yarn add [package]
yarn remove [package]
yarn upgrade [package]

yarn add [package]@[version]
yarn add [package]@[tag]

yarn add --dev/-D // devDependencies
yarn add --peer/-P // peerDependencies
yarn add --optional/-O // optionalDependencies

yarn add --exact/-E // 安装包的精确版本 1.2.3
yarn add --tilde/-T // 安装包的次要版本里的最新版 1.2.x

yarn publish
yarn run // 用于执行package.json中scripts属性下的脚本
yarn info [packageName]

yarn cache // 缓存
yarn cache list // 列出已缓存的每个包
yarn cache dir // 返回 全局的返回位置
yarn cache clean // 清除缓存

webpack5

目标：

使用webpack搭建开发环境
使用webpack进行打包优化

内容：

什么是webpack
webpack安装和基本体验
webpack五个核心概念
打包样式资源
打包HTML资源
打包其他资源
devServer配置与应用（自动编、热更新的工具）
配置可用的基本开发环境
开发环境优化
生产环境优化
webpack配置文件内容详解
配置标准的开发和生产环境案例
配置jQuery+BootStrap开发环境

认识webpack5

webpack是一个模块打包器（构建工具），主要目标是将JS文件打包在一起，打包后的文件用于在浏览器中使用，此外，他还能胜任转换（transform）、打包（bundle）、包裹（package）任何资源（resource or assert）；

webpack可以帮助构建打包，处理很多兼容、依赖性的问题，模块化开发，提供扩展性支持；

webpack原理和概念：

树结构：在一个入口文件中引入所有资源，形成所有依赖关系树状图；
模块：可以是ES6模块，也可以是commonJS或AMD模块，对于webpack，所有资源都算模块，如css、img等；
chunk：打包过程中被操作的模块文件叫做chunk，如异步加载一个模块就是一个chunk；
bundle：只最后打包出来的文件，最终文件可以是chunk，也可以是多个chunk的集合；
- 一个bundle对应对个chunk，一个chunk对应多个模块，一个模块可以是一个js、css、img等；

webpack安装和简单使用

1.初始化项目:

cd webpack-demo
npm init -y

2.安装webpack、webpack-cli

// 只需安装到 dev环境
npm install webpack webpack-cli -D
// 等价于
npm install webpack webpack-cli --save-dev

3.创建所需目录及文件：

|- src
  |- one.js
  |- two.js
  |- index.js

// one.js
let n = 100;
function add(x,y){
  return x + y;
}

function demo(srt){
  return str;
}

module.exports = {
  n:n,
  add:add,
  demo:demo
}

// two.js
const {n,add} = require('./one');

let b = 20;
let sum = add(n,b);

module.exports = {sum}

// index.js
const {sum} = require('./two');
console.log(sum);

4.控制台运行命令：

// 开发模式
webpack --mode=development
// 发布模式(会进行压缩)
webpack --mode=production

5.对于打包后的资源（dist/main.js），可以直接通过node运行，也可以引入到HTML中进行使用；

webpack的五个核心概念

entry：

入口：指示webpack以哪个文件作为入口起点开始打包，分析构建内部依赖图；

output：

输出：指示webpack打包后的资源bundles输出到哪里，以及如何命名；

loader：

loader可以让webpack能够处理那些非js资源，如css、img等，将它们处理成webpack能够识别的资源；
可以看做是一个转换过程，webpack自身只能理解js和json；

plugins：

插件：可用于执行范围更广的任务；
插件的范围包括，从打包优化和压缩，到重新定义环境中的变量等；

mode：

模式：只是webpack使用相应模式的配置；
- 开发模式（development）：配置比较简单，能让代码本地调试运行的环境；
- 生产模式（production）：代码需要不断优化达到性能最好，优化线上环境；
都能启动一些插件，生产模式使用的插件更丰富；

// 命令行操作
$ webpack ./src/index.js -o ./dist/main.js --mode development

使用配置文件（webpack.config.js）：

比命令行操作更加全面，本质就是一个js文件，使用module.exports = {...}将配置信息暴露出去即可；
有了配置文件，命令行只需在项目目录执行$ webpack命令即可按照配置文件进行打包；
上述的五个核心概念都可以在这个配置文件中进行详细配置；

webpack.config.js核心配置项：

// 从node.js路径模块中 引入 解析路径方法
const {resole} = require('path');

module.exports = {
  // 
  entry:'./src/index.js',
  output:{
    filename:'main.js',
    path:resolve(__dirname,'dist'),//拼接 当前根目录 作为打包输出文件目录
  },
  mode:'producton',// development production

  // loader
  module:{
    rules:[
      // ...
    ]
  },

  // plugins
  plugins:[
    // ...
  ] 
}

多入口、多出口的情况配置

webpack.config.js：

作用是指示webpack干那些活，当运行webpack指令时会加载其中配置；
构建工具是基于nodejs平台运行的，模块化默认采用CommonJS，而项目文件（src内文件）采用的是ES6语法；

单入口&多入口：

单入口：指定一个入口文件，会打包一个chunk；
多入口（数组形式）：所有的入口文件会打包生成一个chunk；指定输出名字为filename:'main.js'；
多入口（对象形式）：有几个入口文件就会生成几个chunk，chunk名称为filename:'[name].js'，name即对象的key；

const {resole} = require('path');

module.exports = {
  // 单入口
  entry:'./src/index.js',

  // 多入口（数组形式）
  entry:[
    './src/index.js',
    './src/main.js',
  ],

  // 多入口（对象形式）
  entry:{
    one:'./src/index.js',
    two:'./src/main.js',
  },

  output:{
    filename:'main.js',
    path:resolve(__dirname,'dist'),//拼接 当前根目录 作为打包输出文件目录
  },

  output:{
    filename:'[name].js',
    path:resolve(__dirname,'dist'),//拼接 当前根目录 作为打包输出文件目录
  },

  mode:'producton',// development production
}

webpack打包htnl资源

与CSS打包使用loader的方式不同，html打包和压缩使用的是插件（plugins）；

使用插件html-webpack-plugin
- 下载：npm i html-webpack-plugin -D（开发时插件）
- 引入：const HtmlWebpackPlugin = require('html-webpack-plugin');
- 使用：如下code；
html-webpack-plugin插件生成的内存中的页面已帮我们创建并正确引用了打包编译生成的js/css资源；
JS代码只要是在production模式，会自动压缩，而打包html时的压缩，需要进行相应的配置；

plugins:[
  // 默认会创建一个空的html文件，自动引入打包输出的所有资源（JS、css），就不用自己手动引入了
  // new HtmlWebpackPlugin()

  // 通过参数可以输出有结构的html资源
  new HtmlWebpackPlugin({
    template:"./src/index.html",//输入文件模板
    filename:"demo.html",//打包输出的文件名
    minifu:{
      // 移除空格(注：字体图标中如果也用到了空格，也会被去掉，使用时需要权衡)
      collapseWhitespace:true,
      // 移除注释
      removeComments:true
    }
  })
]

练习：webpack打包多html案例

多个html需要多个entry，同时需要多个HtmlWebpackPlugin；

示例场景：

商城首页（index.html）、和购物车页面(cart.html)，两个html页面；
首页js（index.js），购物车页面js（cart.js）
两个页面用到的通用库（jquery.js、common.js）


entry:{
  vendor:['jquery','./src/js/common.js'],// 安装库  和 本地库
  index:"./src/js/index.js",
  cart:"./src/js/cart.js"
}

// index.html
new HtmlWebpackPlugin({
  filename:'index.html',
  template:'./src/index.html',
  chunks:["index",'vendor'],// 指定需要引入的chunk
  minify:{
    removeComments:true
  }
}),

// cart.html
new HtmlWebpackPlugin({
  filename:'cart.html',
  template:'./src/cart.html',
  chunks:["cart",'vendor'],
  minify:{
    removeComments:true
  }
}),

webpack打包CSS资源

需要使用loader：

使用npm下载安装两个loader帮助完成css的打包；
css-loader的作用是处理css中的@import和url这样的外部资源；
- npm i css-loader style-loader -D
style-loader的作用是把样式插入到DOM中，方法是在head中插入一个style标签，并把样式写入到这个标签的innerHTML里；

index.js：

// require('./index.css')
// 或
import './index.css'

wenpack.config.js：

module:{
  rules:[
    {
      // 正则匹配css文件
      test:/\.css$/,
      use:[
        // use数组中的loader执行顺序是 从右到左 从下到上 依次执行

        // 创建style标签，将js中的样式插入到header中生效
        'style-loader',
        // 将css文件编程commonjs模块 加载到js中 内容为样式字符串
        'css-loader'
      ]
    }
  ]
}

webpack打包less、sass资源

由于css只是单纯的属性描述，他并不具有变量、条件语句等特性，大致其难组织和维护；

Sass和Less都属于CSS预处理器，作为一种新的编程语言，为CSS增加一些编程的特性，将CSS作为目标生成文件；

Less需要使用 less包和less-loader；
- npm i less less-loader -D
Sass需要使用 node-sass包和sass-loader；
- npm i node-sass sass-loader -D

入口js引入：

import './index.less'
import './index.sass'

module:{
  rules:[
    {test:/\.css$/, use:['style-loader','css-loader']},
    {test:/\.less$/, use:['style-loader','css-loader','less-loader']},
    {test:/\.scss$/, use:['style-loader','css-loader','sass-loader']},// 注意sass文件的后缀名是scss
  ]
}

提取CSS为单独文件

之前，我们通过style-loader把样式插入到DOM中，在head中插入一个style标签，并把样式写入到这个标签的innerHTML里；

如果想把css提取为单独的样式文件，可以使用mini-css-extract-plugin插件：

// 下载安装
// npm i mini-css-extract-plugin -D

// 引入插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// 在plugins中配置使用
plugins:[
  new MiniCssExtractPlugin({
    filename:'./css/main.css'
  })
]

// 在css的rules中，使用 MiniCssExtractPlugin.loader取代 style-loader，提取js中css内容为单独文件
// 注：如果要将css打包成多个单独的css文件，还需要其他插件的支持
rules:[
  {test:/\.css$/, use:[MiniCssExtractPlugin.loader,'css-loader']},
  {test:/\.less$/, use:[MiniCssExtractPlugin.loader,'css-loader','less-loader']},
]

处理css的浏览器兼容性

一个CSS支持的属性，经webpack处理成各个浏览器都支持的方式；

需要使用postcss处理，下载两个包：post-loader和postcss-preset-env

npm i postcss-loader postcss-preset-env -D
postcss会找到package.json中的browserslist里的配置，通过配置加载css的兼容性；
修改loader的配置，新版需要写postcss.config.js；less和sass的兼容性同理；

rules:[
  // 普通css
  {test:/\.css$/, use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']},
  // less
  {test:/\.less$/, use:[MiniCssExtractPlugin.loader,'css-loader','less-loader','postcss-loader']},
]

需要注意的是postcss-preset-env插件是postcss-loader中使用的，所以这里需要提供一个单独的插件配置文件：postcss.config.js

// postcss.config.js
module.exports = {
  plugins:[
    require('postcss-preset-env')()
  ]
}

接下来还要在package.json中配置支持兼容的浏览器：

// package.json
'browserslist':[
  "> 0.2%",
  "last 2 versions",
  "not dead"
]

压缩CSS

使用optimize-css-assets-webpack-plugin插件压缩CSS内容：

npm i optimize-css-assets-webpack-plugin -D
引入：const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
使用插件：plugins:[new OptimizeCssAssetsWebpackPlugin()];

webpack打包图片资源

webpack中把图片资源也看成是一个模块，需要导入才能使用：

需要使用url-loader和file-loader两个包；
npm i url-loader file-loader -D;
使用场景：
- html中：<img src='./test.png'> 这里按照css的img使用方式来使用，不同的是还要使用html-loader来处理html里边引入的图片；补充安装下html-loader；
- css中：background-image:url('./test.png') 编译之后会拼接上公共路径；
- 两种场景打包方式是不一样的；

rules:[
  // 普通css
  {
    // 需要处理的图片资源
    test:/\.(png|jpg|jpeg|gif)$/, 
    // 多个loader的配置
    use:[
      'url-loader',
      {
        loader:'file-loader',
        options:{}
      }
    ],
    // 如果只有一个loader就不用数组了，也就不需要用use，直接用loader即可
    loader:'url-loader',
    options:{
      // 小于8k的资源，会被base64编码，减少请求数量
      limit:8 * 1024,
      publicPath:'./images/',//将输出路径 作为公共路径 这样 在使用时直接使用公共路径下的图片即可 这个公共路径会被自动拼接上
      outputPath:'images/',//指定输出路径
      // 图片重命名
      name:'[name][hash:10].[ext]',
      // 老版本需要加上下边这个配置，webpack5不需要；之所以加这个是因为老版本默认是es6语法解析，但是实际转出来的并不是字符串，而是对象，应使用CommonJS解析，所以要将esModule设置为false
      esModule:false
    }
  },{
    test:/\.html$/, 
    loader:'html-loader'
  }
]

webpack打包其他资源——以字体图标为例

一般都使用阿里的iconfont.cn去找想使用的字体图标；

使用Github登录，可以直接添加到项目中；
支持CDN的链接，更新代码后直接使用CDN即可，不必下载本地；
如果使用下载到本地之后在使用的方式，想通过webpack去打包，可以按照如下步骤：
- 下载收集好的字体图标；
- copy到指定项目目录；
- 配置loader；
- 在入口js中，引入相对路径的字体图标css样式文件；
- 在html中即可使用；

rules:[
  {
    // 排除的方式
    exclude:/\.(js|json|html|css|less|scss|png|jpg|jpeg|gif)$/,
    loader:'file-loader',
    options:{
      outputPath:'font',
      publicPath:'./font',
      name:'[name][hash:8].[ext]'
    }
  }
]

开发配置

已经介绍了所有webpack打包相关的内容，接下来继续开发相关的配置；

配置eslint对js语法进行检查

打包时，进行js语法检查，代码风格、规范检查；

eslint：

eslint是一个开源的js代码检查工具，初衷是为了让程序员可以创建自己的检测规则；
实际生产中，团队会指定一套统一的标准，以使团队的编码风格统一；
eslint与webpack没有任何关系，两者也不存在依赖关系；
语法检查使用eslint-loader，基于eslint包；
- 一般只检查自己写的js源码，第三方库不用检查，可以在npmjs.com查看规则；
一般常用的通用js规范有airbnb，如果想按照这个规范的基础版进行代码检查的话，需要使用两个包：
- eslint-config-airbnb-base和eslint-plugin-import;
一共四个包，均安装为开发环境依赖；

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

plugins:[
  new MiniCssExtractPlugin({
    filename:'./css/main.css'
  })
]

rules:[
  {
    // js语法检查
    test:/\.js$/, 
    // 排除第三方库
    exclude:/node_modules/,
    // 这个loader默认会加载配置json文件中的配置
    loader:'eslint-loader',
    options:{
      // 对于检查出来的语法错误 进行自动修复（前提是可修复）
      fix:true 
    }
  }
]

配置json文件：

// package.json

"eslintConfig":{
  // 继承自基础规范
  "extends":"airbnb-base",
}

如果希望某一行代码不被eslint检查，可以进行如下注释：

// eslint-disable-next-line
console.log('hahah');// 生产环境 eslint会对log进行warning提示

配置开发服务器 devServer（支持实时编译+热更新）

devServer可以提供一个开发过程中的服务器，是一个使用express的HTTP服务器；主要作用是为了监听资源文件的改变，该http服务器和client使用了websocket通信协议，只要资源文件发生改变，webpack-dev-server就会实时的进行编译；

实现内存中编译，不会有任何额外输出，需使用webpack-dev-server包(开发环境)；
webpack-dev-server并不能读取你的webpack.config.js的配置output；
webpack5无法刷新问题解决：在webpack.config.js添加配置target:'web'，webpack4则不需要；

启动devServer：

// npx webpack serve
webpack serve
// webpack serve --port 8999 

// 其他可指定参数
--content-base//设定webpack-dev-server的director根目录，如果不进行设定的话，默认是当前目录下；
--quiet//控制台中不输出打包的信息，开发中一般设置为false，这样可以打印错误信息；
--no-info//不显示任何信息
--colors//对信息进行颜色输出
--no-colors//对信息不进行颜色输出
--compress//开启gzip压缩
--host<hostname/ip>//设置ip
--port<number>//设置端口号 默认8080
--inline//webpack-dev-server会在你的webpack.config.js的入口配置文件中再添加一个入口
--hot//开启热替换
--open//启动命令 自动打开浏览器
--history-api-fallback//查看历史url

如果不想这样启动，可以在package.json中配置执行脚本：

"scripts":{
  "test":"echo \"Error: no test specified\" && exit 1",
  "serve":"webpack serve --mode development",//由于执行脚本这里 已经指定了mode，单独的mode配置就不需要了 注释掉即可
  "build":"webpack --mode production"
},
// 命令行指定的参数 也可以在配置文件中进行诸项配置
"devServer":{
  port:8001,
  compress:true,
  open:true
}

脚本执行：

npm run serve
npm run build

注：配置文件修改之后，需要重新运行项目；

我们熟知的Vue-Cli，我们在使用时，这些都是脚手架工具中通过webpack配置好的，直接用就行；

环境优化

开发环境优化：

打包构建速度
优化代码调试

生产环境优化：

代码运行的性能；

开发环境优化——HMR模块热替换

模块热替换（Hot Module Replacement 即HMR）是webpack提供的核心功能之一，它允许在运行时更新各自模块，而无需进行完全编译刷新；
启用这个功能，只需修改一下webpack.config.js的配置，使用webpack内置的HMR插件即可，在devServer的配置中使用hot参数；
样式HMR，在开发环境使用style-loader，使用将样式引入head中的方式，这可以只更新CSS样式文件；可以用node的环境变量判断是开发环境还是生产环境；
HTML的HMR，默认没有HMR功能，需要在webpack.config.js的entry入口配置中加入html文件路径；这样当HTML内容变化时，只更新HTML；
js的HMR功能：默认没有HMR功能
- 启用webpack内置的HMR插件后，module.hot接口就会暴露在入口index.js中；
- 接下来需要在index.js中配置告诉webpack接收HMR的模块：

if (module.hot){
  // 热更新可用时 监听某js文件的变化
  module.hot.accept('./xxx.js', function(){
    // 回调函数处理
  })
}

注：一般文件很多时，才需要加HMR；

生产环境优化——去除项目里的死代码（无用的js和css）

去除无用的js代码：

webpack通过tree-shaking去掉了实际上并没有使用的js代码来减少包的大小；
必须使用es6模块化、并开启production环境；
无需特别的插件，webpack5就支持；

// 使用es6模块化
export one
export two

...

import {one, two} from 'xxx.js'

去除无用的css代码：

比如常用的BootStrap（140K）可以减少到35K大小；
webpack使用purgecss-webpack-plugin去除无用的css

基本配置：

const {resolve, join} = require('path');

const PurgecssPlugin = require("purgecss-webpack-plugin");
const glob = require("glob");
const PATHS = {src:join(__dirname, 'src')}//当前目录下的src子目录

...

new PurgecssPlugin({
  paths:glob.sync(`${PATHS.src}/**/*`, {nodir:true}),
})

注：格式化快捷键，Ctrl+Alt+L

baby_hua

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
Web开发-基础环境配置

Web开发-基础环境配置回炉再造！2021 Vue3.0 前端全家桶学习笔记web前端职业发展路线技术范围广，发展速度快，兼容浏览器众多：核心技术：html css JavaScript（BOM、DOM）新的技术：html5 css3 ES6旧框架：jQuery直接操作DOM、BootStrap新框架：虚拟DOM，Vue、React、AngularJS、微信小程序、WebAPP；还需要了解一定的Nodejs通用工具：NPM：包管理器WebPack：打包工具ES6：更高效的语
复制链接

扫一扫

专栏目录