import 方式引入

在组件中直接 import js 和 css 公共文件, 这种引入会进行 Webpack 编译,比如压缩

import  'asset/css/global.css'
import  'asset/js/common.js'

文件拷贝模式

借助 copy-webpack-plugin 进行文件拷贝,copy 插件已在 easywebpack@4.8.5 内置支持,然后页面通过 link 标签引入。注意拷贝的文件不会压缩和hash,所以拷贝的文件建议是压缩的,同时修改引入时,记得修改版本号版本号控制。

  • webpack.config.js 配置
module.exports = {
  plugins: {
    copy: [{
      from: 'app/web/asset/css/bootstrap.min.css',
      to: 'asset/css/bootstrap.min.css'
    }]
  }
};
  • 页面引入
<link href="/public/asset/css/bootstrap.min.css?v=1" rel="stylesheet" type="text/css" />

CDN 链接引入

<link href="//bootcdn.com/public/asset/css/bootstrap.min.css?v=1" rel="stylesheet" type="text/css" />

静态资源内敛

raw-loader 内敛脚本 或 Vue template 标签动态绑定引入

const vConsoleScript = `<script async src="//cdn.com/script/vConsole.min.js"></script>';  
<template v-html="vConsoleScript"></template>
<template v-html="require('raw-loader!./script/vConsole.min.js')"></template>

Author: sky
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
单页面举例 单页面举例
easywebpack-vue 构建单页面应用Vue + Vuex + Vue-Router 基本实现router/index.js 实现// router/index.js import Vue from 'vue'; import VueRouter from 'vue-router'; import ListView from './list'; import DetailView from './detail...
2020-04-18 sky
Next 
组件异步加载 组件异步加载
issue: react-loadable 怎么加入这个骨架中 #23安装依赖npm install react-loadable --save 实现异步组件// async-image.jsx import React, { Compon
2020-04-18 sky