依赖关系:
"webpack": "^4.12.0",
"webpack-cli": "^3.0.3",
"vue": "^2.5.16",
"vue-loader": "^14.2.2",
Webpack配置output内容:参考
// :关键点:
const publicPath = isProd ? '/vue/' : '/';
output: {
path: path.resolve('dist' + publicPath),
publicPath: publicPath,
filename: `js/[name]${isProd ? '.[hash:7]' : ''}.js`
},
// 关键点: 上面的publicPath相当于Webpack 的 DefinePlugin执行了↓
new webpack.DefinePlugin({
'process.env.ASSET_PATH': JSON.stringify(extPath),
}),
Vue组件A标签使用href路径:
// 测试环境路径为: /tools
// 生产环境路径为: /vue/tools
<a :href="`${__webpack_public_path__}tools/fifa`">
const link = `${__webpack_public_path__}tools/fifa`
// Property or method "__webpack_public_path__" is not defined on the instance but referenced during render
需要注册__webpack_public_path__给vue的data
data () {
this.__webpack_public_path__ = __webpack_public_path__
return {
...
}
}
解决:保证开发和生产环境路径一致
图片路径问题:
{
test: /\.(jpe?g|png|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
fallback: 'file-loader',
limit: 10000,
// 设置导出路径,相对于output的publicPath路径
outputPath: 'images/'
}
}
]
},
生产打包tree:
└── vue
├── favicon.ico
├── images
│ ├── 1cb4d60d80d9ed007efb9f9d2f934a00.png
│ └── 81f5b003430bdd08ee0ad4df21c3acf6.png
├── index
│ └── index.html
├── js
│ ├── 0.d0b19b9.js.gz
│ ├── 1.d0b19b9.js.gz
│ ├── fifa
│ │ └── 2018.d0b19b9.js.gz
│ ├── index.d0b19b9.js.gz
│ ├── social
│ │ └── photo.d0b19b9.js.gz
│ └── tools
│ ├── fifa.d0b19b9.js.gz
│ ├── flag-logo
│ │ └── all.d0b19b9.js.gz
│ └── vscode.d0b19b9.js.gz
└── tools
├── fifa
│ └── index.html
├── flag-logo
│ ├── all
│ │ └── index.html
│ └── index.html
└──
更多访问:github: https://github.com/qiaolevip
or coding
分享到:
相关推荐
一个简单的webpack4.x配置demo webpack4.x配置入门教程:https://blog.csdn.net/weixin_39291021/article/details/86569529
webpack1.x 指导文档,可能还不太完善。 1.1 概述 1.2 怎么使用webpack 1.3 demo01中webpack.config.js的配置项 1.4 创建demo02 1.5 demo02 1.6 demo03内置插件 1.7 demo04外部插件 1.8 demo05-babel-loader 1.9 ...
对最新的webpack4.x进行解析,对常见的错误和运行方式进行案例展示。通过对webpack4.x的最新剖析,可以快速准确学习最新的webpack开发技术,对前端开发工作效率提升n倍。
babel7.x和webpack4.x配置vue项目的方法步骤.docx
整个webpack4.x基础入门,对常见错误进行操作分析,从安装到配置到打包,展示了webpack最新版本的特点。可以快速准确入门webpack.
webpack5.md 文档
利用vue-cli搭建vue+typescript+webpack4.x项目,附详细步骤.zip
webpack.config.jswebpack.config.js
Full_Webpack-45.4.2608-IT310_Full_Webpack.exe
vue2.x-element2.x-webpack4.x-boilerplate 基于 vue 2.x + element-ui 2.x + webpack 4.x + jest 的一套脚手架 环境依赖 node 不低于 v7.0.0 (webpack 4 要求 v6.11.5 及以上)
最近刚学的webpack3.0,从零到一套相对比较齐全的配置
webpack核心概念、配置文件的整体结构、模块化打包的基本流程、loader与plugin、live-reload(自动刷新)与hot-realod/HMR(热模替换)
webpack分享.md
webpack-doc, 个人业余 webpack 1.x 文档翻译(非官方)(未完成)
终端在运行webpack命令时会输出很多信息,让人看着不太舒服~ 那就需要使用这个插件来解决这个问题:修改webpack.dev.conf.js配置文件://
前段时间,泡面将自己的一个Vue-cli构建的前端框架从webpack3.x升级到了4.x版本,现在才拉出来记录一下,已备忘之用,也和大家分享一下,以免大家采坑。 原先的环境 项目原先通过Vue-cli 2.9.3 版本构建,原先使用...
为此,笔者进行了最新版配置的探索,使用的是windows操作系统,如果你的是webpack4.x版本,可参考进行配置。 注意:本文并不是直接把正确步骤放上去,而是分析了各种报错情况及原因,文章的步骤显得绕弯子。如果仅仅
本篇文章主要主要介绍了基于webpack2.x的vue2.x的多页面站点 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
webpack4.x完整的webpack4.x配置运行npm run build,在根目录下会自动生成dist文件夹,里面放全是打包后的文件;运行npm run dev在根目录下会自动生成node_modules文件夹,服务端下运行