【项目学习】Vue+webpack搭建项目+问题汇总及解决

Vue深精透

可复用的tab组件把

服务端渲染的好处是 在初次加载过程中能页面数据一次把页面内容显示出来

初始化项目/webpack基本配置

Step1:npm init

初始化 package.json配置文件（npm描述文件）

Step2:npm i webpack vue vue-loader

下载失败：npm config set registry https://registry.npm.taobao.org 使用淘宝镜像下载成功

Step3: npm install css-loader

根据npm提示下载所需要的依赖

Step4：创建src作为源码存放的目录

Step5：添加App.vue

Step6：创建webpack.config.js

webpack是帮助打包前端资源，需要通过http请求加载js到浏览器端，再渲染出来，所以可以以js文件作为入口

//src->index.js 该文件作为入口文件
//将app.vue挂载到html vue是如何挂载的呢？

>>>index.js

import Vue from 'vue'
import App from './app.vue'

//再body当中插入div
const root = document.createElement('div')
document.body.appendChild(root)

//声明了组件挂载的是App的内容
new Vue({
    //参数h是Vue的CreateApp参数 
    render:(h)=>h(App)
}).$mount()

Step7：webpack.config.js 添加配置

当我们需要处理超出webpack理解的语法，需要添加帮助理解语法的工具

Step8：配置loader

css的处理有两种方式：1.css在前端项目运行时，作为外部文件进行处理 2.再.html中 在

处理完成后,css代码会在js文件中以一段代码的形式呈现，该代码的作用是将css写入html中

图片的处理：url-loader （封装了file-loader）

将图片资源转换成base64直接写入js里，对于较小的图片，这样写可以减少http请求

封装了 file-loader 读取图片 重命名图片 保存在指定位置

可以使用css预处理器

stylus,sass,less 谷歌看文档 看用法即可 keyword:stylus-loader

Step9：webpack-dev-server 配置

内容：webpack-dev-server 适用于开发环境 同时需要修改配置 以配合webpack-dev-server

Step10：设置.html文件入口

再设置完 webpack-dev-server之后，我们编译完成的js,png等文件，没有一个html文件去容纳这些文件，项目无法运行。需要一个.html作为项目入口

npm i html-webpack-plugin

Step11:启动项目，区分开发环境和生产环境

查看项目内容需要基本配置，则需要区分开发环境和生产环境

//配置文件同时适用于开发环境和正式环境中，判断环境，通过运行中设置好的环境变量来判断是那种环境
if (isDev) { 
    //直接在浏览器进行代码调试 原因：经过编译的代码在控制台直接看 看不懂 把源代码映射上去 帮助调试
    config.devtool="#cheap-module-eval-source-map"
    config.devServer = {
        port:'8000',
        host: '0.0.0.0',//localhost 127.0.0.1 访问 同时可以通过本机的内网ip进行访问
        overlay: {
            errors: true,
        },
        //单页应用 需要做映射的地址在这里做映射
        // historyFallback: {}
        // open:true
        //改了一个组件的代码，只重新渲染当前组件
        hot:true
    }
    config.plugins.push(
        // 热加载
        new webpack.HotModuleReplacementPlugin(),
        // 减少不需要信息展示
        new webpack.NoEmitOnErrorsPlugin(),
    )
}

补充内容

vue的生产环境dependencies和开发环境devDependencies 二者的理解和区别

使用任何框架之前，都要经历环境搭建的过程，而在前端框架的环境搭建中（比如React、Vue等），NPM是必不可少的依赖包管理工具。我们在使用NPM命令安装依赖包时，经常会用到 -S 或者是 -D 这些指令，例如，我们安装webpack时会执行以下命令：

npm install -D webpack

对于前端初学者来说，可能还不太理解什么时候使用 -D ，什么时候使用 -S ，以及二者之间的区别。这就和我们这篇文章要讲的主题有关系了，NPM中的 dependencies 和 devDependencies 配置。

1. 什么是NPM

简单来说，NPM（Node Package Manager）是包含在Node.js里面的一个包管理工具，NPM会随着Node.js一起安装。NPM为开发者提供了一个代码模块共享的大平台，当我们项目中需要使用某个模块（JavaScript包）时，可以直接使用NPM包管理工具来下载对应的包并安装，我们也可以把自己用Node.js写的代码发布到平台上供他人使用。

2. package.json文件

搭建一个前端项目之前，通常会在项目的根目录下生成一个名为package.json的文件作为NPM包的描述文件，使用该文件来定义项目信息、配置包依赖关系。package.json文件可以自己手动创建，也可以使用命令来创建：

npm init

文件中包含了NPM包的基本信息（项目名称、版本号、项目描述、作者）和依赖管理，例如：

{
    "name": "demo",
    "version": "1.0.0",
    "devDependencies": {
        "webpack": "^4.29.6"
    }
}

在package.json文件中，所有的依赖包都会在 dependencies 和 devDependencies 的配置项中进行管理，它们的意思是：

• dependencies： 表示生产环境下的依赖管理；
• devDependencies： 表示开发环境下的依赖管理；

3. 开发环境和生产环境

很多同学不太理解什么是开发环境和生产环境，简单来说，就是在项目的开发阶段就是开发环境；项目上线了，开始正式提供对外服务，上线后的阶段就是生产环境。在生产环境下，一般会关掉错误报告，打开错误日志等操作。

devDependencies配置的是开发环境，安装项目开发时所依赖的模块。比如像webpack工具，只是用来构建项目和打包，这些都是在开发阶段才使用的，等项目上线后就用不到webpack工具了，那么我们就可以把webpack安装到开发环境中，使用 --save-dev命令安装到devdependencies下，命令语法：

npm install --save-dev packageName
# 简写
npm i -D packageName

dependencies配置的是生产环境，安装项目运行时所依赖的模块。比如jQuery库，等项目上线以后依然是要继续使用的，我们就要安装在生产环境中，如果没有把需要的依赖安装到生产环境中，项目上线运行时就有可能会报错。使用 --save 命令安装到 dependencies 下，命令语法：

npm install --save packageName
# 简写
npm i -S packageName

注：上面的 -S ，是大写的S

总结

配置项	命令	描述
devDependencies	–save-dev 简写 -D	开发环境，管理的依赖包仅在开发阶段有效
dependencies	–save 简写 -S	生产环境，管理的依赖包在项目上线后依然有效

掌握了原理，在开发中我们就可以根据需求，来正确使用指令安装依赖包，防止以后出现不可预知的问题。

将app.vue挂载到html vue是如何挂载的呢？原理!!!

vue-loader配置后，打包报错

vue-loader@15.*之后除了必须带有VueLoaderPlugin 之外，还需另外单独配置css-loader。

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {

 // ...

 module: {
  rules: [
   {
​    test: /\.vue$/,
​    loader: 'vue-loader'
   },
   {
​    test: /\.css$/,
​    use: ['style-loader','css-loader']
   }
  ]
 }
 plugins: [
  new VueLoaderPlugin()
 ]
}

webpack打包css时CssSyntaxError的问题

style-loader和css-loader的顺序是 style-loader在前，不可写错

loader的加载顺序是从后往前。这里的编译顺序是先用css-loader将css代码编译，再交给style-loader插入到网页里面去。所以css-loader在后，style-loader在前。

如何获取环境变量 内容补充???

1.mac

"scripts": {

  "test": "echo \"Error: no test specified\" && exit 1",

  "build": "NODE_ENV=production webpack --config webpack.config.js",

  "dev": "webpack-dev-server --config webpack.config.js"

 },

2.windows

解决办法

npm i cross-env 

跨环境处理

了解html-webpack-plugin的功能???

热加载

改了一个组件的代码，只重新渲染当前组件

热加载实现主要分为几部分功能

• 服务器构建、推送更新消息

• 浏览器模块更新

• 模块更新后页面渲染

构建

热加载是通过内置的 HotModuleReplacementPlugin 实现的，构建过程中热加载相关的逻辑都在这个插件中。这个插件主要处理两部分逻辑

• 注入 HMR runtime 逻辑
• 找到修改的模块，生成一个补丁 js 文件和更新描述 json 文件

config.plugins.push(
// 热加载
new webpack.HotModuleReplacementPlugin(),
// 减少不需要信息展示
new webpack.NoEmitOnErrorsPlugin(),
)

webpack打包优化

css单独打包

npm i extract-text-webpack-plugin

非javascript文件打包成静态文件，原因需要做单独做浏览器缓存，或者通过javascript写入浏览器，对效率有所影响

filename有什么区别？

//开发环境
filename: 'bundle.[hash:8].js',
//生产环境
config.output.filename = '[name].[chunkhash:8].js'

chunkhash 每个单独节点都有独特的hash
hash 整个应用的hash

vue-loader会根据每个组件显示时 才会加载到页面 节省流量

如何单独打包类库文件

原因：业务逻辑经常会变，而webpack和vue的各种包比较稳定，为了让类库文件，利用浏览器缓存更长时间的保存在我们的浏览器上，我们要将类库文件和业务逻辑区分打包，减少服务器浏览和加载速度更快

1.变化entry vue库 微博pack库

2.多个异步

3.多个不同的entry