webpack项目调试以及独立打包配置文件的方法

webpack项目调试

-sourcemap

webpack配置提供了devtool这个选项，如果设置为 ‘#source-map'，则可以生成.map文件，在chrome浏览器中调试的时候可以显示源代码。

devtool: '#source-map'

webpack独立生成可修改的配置文件
用generate-asset-webpack-plugin这个插件，在webpack.prod.config.js中去生成configServer.json文件，
让其build的时候生成json文件，然后时候get方法异步获取json，替换url即可
具体做法：
先安装generate-asset-webpack-plugin插件
npm install --save-dev generate-asset-webpack-plugin
在webpack.prod.conf.js里面配置

//让打包的时候输出可配置的文件
var GenerateAssetPlugin = require('generate-asset-webpack-plugin');
var createServerConfig = function(compilation){
 let cfgJson={ApiUrl:"http://139.129.31.108:8001"};
 return JSON.stringify(cfgJson);
}
//让打包的时候输入可配置的文件
  new GenerateAssetPlugin({
    filename: 'serverconfig.json',
    fn: (compilation, cb) => {
      cb(null, createServerConfig(compilation));
    },
    extraFiles: []
  })

打包之后，在根目录就会生成serverconfig.json文件

使用(vue-resourse)：

Vue.http.get("serverconfig.json").then((result)=>{
    localStorage.setItem('ApiUrl',result.data.ApiUrl);
    console.log(localStorage.getItem('ApiUrl'));
 }).catch((error)=>{console.log(error)});

则可以获取到serverconfig.json里面的key ApiUrl的值，需要注意的是，由于是异步操作，为了通信，可以采用localstorage，把东西存起来，即localstorage.setItem；使用的时候可以用localstorage.getItem

以上这篇webpack项目调试以及独立打包配置文件的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • webpack独立打包和缓存处理详解
  • webpack进阶——缓存与独立打包的用法
  • webpack打包js文件及部署的实现方法
  • webpack常用配置项配置文件介绍
赞 (0)

相关推荐

  • webpack独立打包和缓存处理详解

    webpack独立打包和缓存处理详解

    前言 先前写了一篇webpack入门的文章<webpack入门必知必会>,简单介绍了webpack拆分.打包.压缩的使用方法.本文将在上篇文章的基础上进一步讲解在使用webpack构建的项目中存在的优化方案与解决方法. 上篇文章中写了一份webpack最基本的配置文件来打包压缩我们的代码: var path = require('path'); module.exports = { entry: './app/index.js', output: { filename: 'bundle.js'

  • webpack进阶——缓存与独立打包的用法

    webpack进阶——缓存与独立打包的用法

    本文介绍了webpack进阶--缓存与独立打包的用法,分享给大家,希望对大家有帮助 先来看看最基础的webpack配置: var path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } } 在index.js中引入了lodash库: src/index.js: import

  • webpack常用配置项配置文件介绍

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很有用的,所有建议生成) 2.安装webpaack a.在全局中安装webpack:npm install webpack -g b.将webpack安装到项目并将webpack写入package.json的devDependencies中:进入项目根目录,然后在命令行中输入npm install w

  • webpack打包js文件及部署的实现方法

    下面看下webpack打包js文件的实现代码 const path = require('path') const webpack = require('webpack') const htmlWebpackPlugin = require('html-webpack-plugin') // 每次打包之前,自动删除文件夹 const cleanWebpackPlugin = require('clean-webpack-plugin') // 分离 css 到独立的文件中 const Extra

  • webpack项目调试以及独立打包配置文件的方法

    webpack项目调试 -sourcemap webpack配置提供了devtool这个选项,如果设置为 '#source-map',则可以生成.map文件,在chrome浏览器中调试的时候可以显示源代码. devtool: '#source-map' webpack独立生成可修改的配置文件 用generate-asset-webpack-plugin这个插件,在webpack.prod.config.js中去生成configServer.json文件, 让其build的时候生成json文件,然

  • 浅谈vue+webpack项目调试方法步骤

    浅谈vue+webpack项目调试方法步骤

    题外话:这几个月用vue写了三个项目了,从绊手绊脚开始慢慢熟悉,婶婶的感到语言这东西还是得有点框框架架,太自由了容易乱搞,特别人多的时候. 从webpack开始 直接进入正题.有人觉得vue项目难调试,是因为用了webpack.所有代码揉在了一起,还加了很多框架代码,根本不知道怎么下手.所以vue+webpack调试要从webpack入手.我们先从一般情况开始说. -sourcemap webpack配置提供了devtool这个选项,如果设置为 '#source-map',则可以生成.map文件

  • vue-cli+webpack项目 修改项目名称的方法

    使用vue-cli+webpack创建的项目,修改文件名称或者更改文件的位置,运营时会报错,是因为npm项目,在安装依赖(node_nodules)时,会记录当前的文件路径,当修改之后就无法正常启动. 解决方法: 1 删除 node_modules 文件夹(如果修改项目名称,需要在在package.json中修改对应的name) 2 重新安装依赖 cnpm install 3 启动项目 cnpm run dev ok,解决 以上这篇vue-cli+webpack项目 修改项目名称的方法就是小编分

  • 基于vue-cli搭建多模块且各模块独立打包的项目

    如果我们在开发系统A时,能够按模块划分生成多份静态资源包,最终的成果物中,会有多个子目录,每个子目录可独立运行,完成一个业务功能.这样的话,我们有任何系统需要我们开发过的任何模块,都可以直接打包指定的模块,灵活组装. 优点: 1.可与其他系统灵活组装 2.各个模块相互不受影响,所以不受框架和开发模式的制约 3.不同模块可以分开部署 4.后期维护风险小,可以持续的.稳定的进行维护 缺点: 1.各个模块有相互独立的资源包,那么如果有相同的资源引用,不能复用 2.模块的组装要依赖iframe,所以要对

  • Vue webpack 项目自动打包压缩成zip文件的方法

    这段时间用 Vue2.0 开发项目,每次打包都会用到 npm run build 命令,但是每次部署时给后端发包都要手动zip压缩,这样一两次还行,但遇到项目板块测试和临时加急功能测试的时候,一天可能就要打包好多次,这就很烦了.所以索性在执行 npm run build 命令时就直接打包成zip文件,方便省事! 1.插件装备 webpack插件:filemanager-webpack-plugin,该插件可执行打包,复制,移动,删除文件以及新文件夹在build之前及之后创建. 安装: npm i

  • vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作

    更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置: if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', // 注意配置这一部分,根据目录结构自由调整 fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(lo

  • 如何在webpack项目中调试loader插件

    如何在webpack项目中调试loader插件

    最近,在学习webpack使用时,发现webpack-replace-loader配置正则不起用,调试插件后才发现,search健值竟然不支持正则的写法,后有换成string-replace-loader插件,这个loader的search健值支持正则写法,问题得到解决.这里记录下loader的调试方法: 首先需要准备node环境 第一步:下载全局安装 node-nightly npm install -g --save-dev node-nightly 第二步:添加调试命令 "node-nig

  • webpack项目中使用vite加速的兼容模式详解

    webpack项目中使用vite加速的兼容模式详解

    目录 前言 目的 要处理的问题 动手 共用 index.html 共用配置 兼容环境变量 自动导入 资源引入 svg-sprite-loader 替代方案 其他 效果 前言 随着公司前端工程越来越大,启动是无尽的等待,修改是焦急的等待. vite 到现在生态也起来了,就有了把项目改造成 vite 的想法,但是项目后面可能要依赖 qiankun 改造成微前端项目,现在 qiankun 对 vite 还没有好的解决方法,我就想采取一个折中的办法,保留 webpack,再兼容 vite,两条路都留着.

随机推荐