easywebpack
基于 Webpack 前端工程构建方案

静态资源

easywebpack - 基于 Webpack 前端工程构建方案, 支持 Webpack Vue, React, Weex, JS, Weex等多种前端框架构建, 包括 Webpack Vue SSR, Webpack React SSR 构建。
Date:  2019-10-20
Word Count:  252
Read Times:  1 Min
Read Count: 

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
Link: https://easyjs.cn/easywebpack/wb66pe/
yuque: https://yuque.com/easy-team/easywebpack/wb66pe/
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
easywebpack5 easywebpack5
方案说明Webpack5适配工作webpack 4  -> webpack 5 插件列表升级 webpack 为 5升级相关依赖插件为最新版本 webpack-tool easywebpack easywebpack-cli easywebpack-vue easywebpack-rea...
2019-10-20 sky
Next 
静态页面构建 静态页面构建
nunjucks 模板构建为纯静态页面项目基于 easywebpack-cli 方式构建在用 HTML 模板构建时, 有一个不好的地方就是不能以组件的方式复用, 如是考虑通过渲染模版编译成HTML静态模版. 目前常见的模板引擎有 nunjucks 等渲染模板, 而且社区也有对应的 Webpack loader 支持. 同时 easywebpack-html 也内置支持了, 我们执行只需要打开开关即可.在项目根目录添加 webpack.config.js 文件中启动 nunjucks loader...
2019-10-20 sky