依赖关系:
"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
- `webpack.config.js` 是 Webpack 的配置文件。 - `package.json` 是项目的元数据文件,包含项目依赖等信息。 ##### 1.2.3 配置 webpack.config.js ```javascript module.exports = { entry: './src/main.js', /...
Webpack 4.x 支持使用 `webpack.config.js` 文件来配置打包行为。这个文件应该位于项目根目录下。通过配置不同的加载器(loaders)、插件(plugins)和其他选项,可以实现非常复杂的打包需求。 2. **常见问题解决*...
Webpack 4.x 是一款强大的模块打包工具,常用于前端开发,能够将JavaScript、CSS、图片等资源进行管理和优化。在本教程"webpack4.xDemo"中,我们将深入了解Webpack的基础使用,包括安装、配置以及打包过程,并针对...
在本文中,我们将探讨如何使用Babel 7.x和Webpack 4.x配置Vue项目,以及在升级和配置过程中可能遇到的问题及解决方案。 首先,让我们看看如何安装和配置这两个工具。在新的Vue项目中,你需要安装以下依赖: 1. `@...
pycharm安装教程 webpack静态资源一键上传阿里云OSS插件,兼容webpack3.x4.x_webpack-oss.zip
webpack5.md 文档
Full_Webpack-45.4.2608-IT310_Full_Webpack.exe
- mode: 模式配置选项,可用于告诉webpack应该使用其内置的优化,选项包括"production"(生产环境,会自动启用优化)、"development"(开发环境,会启用优化且提供更丰富的错误信息和日志)和"none"(关闭优化)。...
这个压缩包"webpack-doc, 个人业余 webpack 1.x 文档翻译(非官方)(未完成).zip"包含了一个个人爱好者对Webpack 1.x版本的非官方文档翻译项目,尽管未完成,但依然能为学习和理解Webpack提供一些帮助。...
webpack.config.jswebpack.config.js
在Webpack的配置文件(通常是webpack.config.js)中,你需要引入HtmlWebpackPlugin,并在plugins数组中添加一个新实例。实例化时,你可以传递一些选项来定制HTML模板,例如: ```javascript const ...
虽然Webpack 5.x 提供了零配置启动,但为了实现特定需求,开发者通常会创建`webpack.config.js`配置文件。配置文件中可以定义入口(entry)、输出(output)、模块规则(module rules)、插件(plugins)等,以实现代码分割...
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,从零到一套相对比较齐全的配置
这里需要注意的是,webpack4.x版本区分了webpack和webpack-cli两个包,分别用于模块打包和命令行工具,这与之前的版本有所不同,在之前的版本中这两个功能是合并在一起的。 在项目结构的搭建上,通常会分为源代码...
4. **配置文件(webpack.config.js)**: 这是 webpack 的核心配置文件,用来指定入口、输出、规则、加载器和插件等。 **二、webpack-dev-server** 1. **热模块替换(Hot Module Replacement, HMR)**: 开发服务器...
下面我们就详细探讨一下webpack 4.x在开发环境中的配置方法,以及在配置过程中可能遇到的问题和解决方案。 首先,安装webpack是配置过程的第一步。在npm或yarn中不指定版本号时,会默认安装最新版本的webpack。在...
最后,在webpack.prod.conf.js中,泡面添加了optimization选项,这是一个在webpack 4.x版本中新增的配置项,用于优化和压缩代码。其中包括了runtimeChunk、minimizer和splitChunks等子选项,可以进一步优化输出的...