webpack

常用合集

hot-reload：热加载。不需要刷新浏览器自动看到变化。
查看htmlwebpackplugin配置

main.js

• 全局引用style，import

好处

1. 图片直接打包进js，没有请求？具体再研究

发布打包网站

npm run build

打包后的文件详解

app.xxxxx(hash).js 自己写的 hash是自己根据内容计算。
查看文件大小，如果过大可以使用vue-cli中的 report可以可视化查看。
在package.json中， "report": "vue-cli-service build --report"，然后npm run report，生成的dist中的report.html。

• 例子
  在我学习慕课网的饿了么app时，使用了moment组件，占用了很大的体积，是因为它会动态引用各国语言js。这里借用webpack的ContextReplacementPlugin。
  步骤：

1. 使用Vue-CLI 的 chainWebpack的plugin进行修改
2. require webpack以后

config.plugin('context')
      .use(webpack.ContextReplacementPlugin,
        [/moment[/\\]locale$/, /zh-cn/])

3. 查阅是否成功
   vue inspect >>xxx.js

4. 在dist文件夹下生成了build之后的文件，可以在该文件夹中启动http-server（需要先安装npm install http-server -g）

发布方式

1. 本地push
2. 服务器pull
3. 服务器build

确保资源路径正确

1. baseURL保证base路径+相对路径
2. 查看Network中静态资源路径、接口