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

亚连
풀어 주다: 2018-06-02 15:16:44
원래의
2556명이 탐색했습니다.

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿