Webpack 프로젝트를 통해 디버깅 및 독립 패키징 구성 파일을 구현하는 방법(상세 튜토리얼)

아래에서는 웹팩 프로젝트 디버깅과 구성 파일 패키징을 독립적으로 수행하는 방법을 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

webpack 프로젝트 디버깅

-sourcemap

webpack 구성은 devtool 옵션을 제공합니다. '#source-map'으로 설정하면 크롬 브라우저에서 디버깅할 때 .map 파일을 생성할 수 있습니다. 표시됩니다.

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) 사용:

rrre 에에

OK serverconfig.json에서 ApiUrl 키 값을 가져옵니다. 비동기 작업이므로 localstorage를 사용하여 항목을 저장할 수 있습니다. 즉, localstorage.setItem을 사용할 수 있습니다. 위의 localstorage.getItem

을 사용하여 모든 사람을 위해 정리했습니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

IView의 on-change 속성 사용을 기반으로 한 자세한 설명

Axios Element를 사용하여 전역 요청 로딩 방법 구현

iview의 Select 선택기 다중 선택 확인 방법

위 내용은 Webpack 프로젝트를 통해 디버깅 및 독립 패키징 구성 파일을 구현하는 방법(상세 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!