Vue08-Webpack结束

webpack打包.vue3文件

1.npm install vue-loader@next

{
    test:/\.vue$/,
    loader:"vue-loader"
}

2.npm install @vue/compiler-sfc
3.在webpack.config.js中
const {VueLoaderPlugin} = require('vue-loader/dist/index')
{
    new VueLoaderPlugin();
}

全局组件： 一个vue文件被export 另一个vue文件import他，然后再components{...}中注册，然后再页面使用<.../>

在DefinePlugins中使用 vue_options_api:ture 对vue2做适配 vue_prod_devtools:false 在生产环境下是否需要使用devtools，但是这个一般在开发环境下使用

不用npm也能自动更新build

Webpack watch

1.在我运行后一次后，下次修改代码，会自动更新打包(推荐)

scripts:{
    "build":"webpack --watch"
}

2.在webpack.config.js中配置

watch:true

webpack-dev-server开启本地服务

安装

npm install webpack-dev-server -D

上方安装好后,添加serve字段，以后就可以npm run serve

会自动开启一个服务器，修改保存完后，页面会自动刷新

dev serve不会将打包文件输出出来，而是保存在内存中

scripts:{
    "build":"webpack",
    "serve":"webpack serve"
}

对webpack dev serve配置

打开webpack.config.js

contentBase:如果webpack中 存在没有打包到的资源
那么设置为相应的文件夹，去该文件夹中去请求并加载资源
开发阶段推荐使用:contentBase,因为会减少资源浪费
打包阶段必须使用:copywebpackplugin，因为需要存储在服务器中
服务器中应该是存在所有资源的，所以打包阶段必须要用copy

module.exports = {
    devServer:{
        contentBase:"./public"
    }
}

模块热替换（HMR）

只修改了一点点，但是却要加载刷新整个页面，就很消耗资源。 通过模块热替换，只需要加载刷新某个修改的模块就行，减少资源的消耗，提高开发效率

最好target和hot同时打开
module.export={
    表示webpack为什么环境进行打包（node、web）
    target:"web",
    
    devServer:{
        hot:true
    }
}

但是这样做并不会进行模块热替换，因为他不知道具体为哪个模块进行热替换

main.js
import "./js/element"

是否开启模块热替换
if(module.hot){
对具体的模块所在文件进行模块热更新
    module.hot.accept("./js/element/js",()=>{
        模块热更新了
    })
}

会不会太麻烦了呢？如下：Vue yyds

HMR的原理

horOnly、host配置

修改端口号、是否打开浏览器、是否开启压缩

压缩没必要开：express

Proxy

用来解决跨域问题 配置Proxy 1.安装

npm install axios

main.js

2.导入库 import axios from 'axios'

3.应用 向 http://localhost:8888/moment 发送网络请求

axios.get("http://localhost:8888/moment").then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(res);
})

此时会发送跨域问题，所以我们要配置Proxy

4.配置Proxy devServer本身就是一台express的服务器，所以在这里配置Proxy 本地代理,只是在开发阶段可以，后期还是要和后端配合

devServer:{
    proxy:{
        代理
        "/api":"http://localhost:8888",
        
    }
}

所以：
这时，我请求的数据实际上是对proxy请求，得到的数据也是从proxy得到
axios.get("/api/moment").then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(res);
})

实际上这样还是不行的，因为axios.get的时候，会默认给我们添加上 http://localhost:8888/api/moment 的域名的，还是会存在错误

所以我们需要重写路径,将/api进行删除

默认情况下，将不接受在HTTPS上运行且证书无效的后端服务器，如果需要，需要配置secure:false

devServer:{
    proxy:{
        "/api:"{
            target:"http://localhost:8888",
            pathRewrite:{
            是/api开头，将他重写
                "^/api":""
            },
            
            希望正常代理，默认为true
            secure:false
            
            changeOrigin:true,
        }
    }
}

historyApiFallback

resolve模块解析

其实resolve.modules已经默认帮我们从node_modules中查找文件，所以会发现，我们有时候只需要import一个浅层的就行了。

resolve.extensions选项里会存在['.js','.json']，没写后缀的文件，我就会带入这些后缀，看看有没有这些文件，所以有的文件可以默认不写后缀名

如果是一个文件夹，我的resolve.mainFiles默认查找index，所以import index的时候只需要写到index文件的上一层就行

extensions和alias的配置

alias:取别名,extensions:提前书写后缀名，以后导入就不用再写后缀了

后续我使用@，就表示是./src目录

resolve:{
    extensions:[".js",".ts".....],
    alias:{
    ./src/js:src下的js文件夹
        "@":path.resolve(__dirname,"./src")
    }
}

如何区分开发环境与生产环境

首先创立三个文件

1.webpack.common.config.js

2.webpack.dev.config.js

3.webpack.prod.config.js

在package.json中进行配置修改 npm run build/serve的不同环境,分离

"scripts":{
--config指定配置文件
    "build":"webpack --config ./config/webpack.prod.config.js",
    
    "serve":"webpack --config ./config.webpack.dev.config.js"

}

然后将以前package.json的数据全部复制到common.config中；

将一些公共的数据还保留，其他的放在dev或者prod中去

dev和prod也需要合并公共的数据，通过插件来

npm install webpack-merge -D

在node环境下，需要通过 require来导入 dev.config

const {merge} = require('webpack-merge') 
const commonConfig = require('./webpack.comm.config')
module.exports = merge(commonConfig,{
   配置数据
})